# React UI

> Components for desktop-grade React apps

Menus, dialogs, tooltips, fields, toasts, a settings dialog, keyboard shortcuts and formatters, drawn from one theme. Built on React 19, Base UI, Lucide and Tailwind 4.

## Table of Contents

### Guide

- [Getting started](https://react-ui.bas.dev/guide/getting-started.md)
- [Principles](https://react-ui.bas.dev/guide/principles.md)
- [Theme](https://react-ui.bas.dev/guide/theme.md)

### Actions

- [Button](https://react-ui.bas.dev/actions/button.md)
- [IconButton](https://react-ui.bas.dev/actions/icon-button.md)
- [ButtonGroup](https://react-ui.bas.dev/actions/button-group.md)
- [CloseButton](https://react-ui.bas.dev/actions/close-button.md)
- [Pill](https://react-ui.bas.dev/actions/pill.md)
- [Tile](https://react-ui.bas.dev/actions/tile.md)

### Inputs

- [Field](https://react-ui.bas.dev/inputs/field.md)
- [Input and TextArea](https://react-ui.bas.dev/inputs/input.md)
- [Select](https://react-ui.bas.dev/inputs/select.md)
- [Switch](https://react-ui.bas.dev/inputs/switch.md)
- [Segmented](https://react-ui.bas.dev/inputs/segmented.md)
- [Stepper](https://react-ui.bas.dev/inputs/stepper.md)
- [ChoiceCards](https://react-ui.bas.dev/inputs/choice-cards.md)
- [IconPicker](https://react-ui.bas.dev/inputs/icon-picker.md)
- [ColorSwatch](https://react-ui.bas.dev/inputs/color-swatch.md)
- [AccentSwatches](https://react-ui.bas.dev/inputs/accent-swatches.md)

### Overlays

- [Menu](https://react-ui.bas.dev/overlays/menu.md)
- [ContextMenu](https://react-ui.bas.dev/overlays/context-menu.md)
- [Dialog](https://react-ui.bas.dev/overlays/dialog.md)
- [PromptDialog](https://react-ui.bas.dev/overlays/prompt-dialog.md)
- [Popover](https://react-ui.bas.dev/overlays/popover.md)
- [PreviewCard](https://react-ui.bas.dev/overlays/preview-card.md)
- [Tooltip](https://react-ui.bas.dev/overlays/tooltip.md)
- [DisabledReason](https://react-ui.bas.dev/overlays/disabled-reason.md)
- [TextMenu](https://react-ui.bas.dev/overlays/text-menu.md)
- [Toasts](https://react-ui.bas.dev/overlays/toasts.md)

### Display

- [Kbd, KeyCap and Keys](https://react-ui.bas.dev/display/kbd.md)
- [ShortcutHints](https://react-ui.bas.dev/display/shortcut-hints.md)
- [Icon](https://react-ui.bas.dev/display/icon.md)
- [FileIcon](https://react-ui.bas.dev/display/file-icon.md)
- [SectionLabel](https://react-ui.bas.dev/display/section-label.md)
- [Surface](https://react-ui.bas.dev/display/surface.md)
- [ListRow](https://react-ui.bas.dev/display/list-row.md)
- [PanelHeader](https://react-ui.bas.dev/display/panel-header.md)
- [Separator](https://react-ui.bas.dev/display/separator.md)
- [Skeleton](https://react-ui.bas.dev/display/skeleton.md)
- [EmptyState](https://react-ui.bas.dev/display/empty-state.md)
- [PanelEmpty](https://react-ui.bas.dev/display/panel-empty.md)
- [Banner](https://react-ui.bas.dev/display/banner.md)
- [ErrorBoundary](https://react-ui.bas.dev/display/error-boundary.md)

### Layout

- [SlidingColumn](https://react-ui.bas.dev/layout/sliding-column.md)
- [ColumnResizeHandle](https://react-ui.bas.dev/layout/column-resize-handle.md)
- [DockShell](https://react-ui.bas.dev/layout/dock-shell.md)
- [ZoomControls](https://react-ui.bas.dev/layout/zoom-controls.md)
- [Wipe](https://react-ui.bas.dev/layout/wipe.md)

### Settings

- [SettingsDialog](https://react-ui.bas.dev/settings/settings-dialog.md)
- [SettingsSection and SettingsRow](https://react-ui.bas.dev/settings/settings-section.md)
- [MasterDetail](https://react-ui.bas.dev/settings/master-detail.md)
- [ConfirmDialog](https://react-ui.bas.dev/settings/confirm-dialog.md)

### Formatting

- [Format source](https://react-ui.bas.dev/formatting.md)
- [Numbers](https://react-ui.bas.dev/formatting/numbers.md)
- [Dates and times](https://react-ui.bas.dev/formatting/dates.md)
- [Durations](https://react-ui.bas.dev/formatting/durations.md)
- [Regions](https://react-ui.bas.dev/formatting/regions.md)

### Hooks

- [useAsyncAction](https://react-ui.bas.dev/hooks/use-async-action.md)
- [useColumnResize](https://react-ui.bas.dev/hooks/use-column-resize.md)
- [useContentSize](https://react-ui.bas.dev/hooks/use-content-size.md)
- [useNow and useTickingText](https://react-ui.bas.dev/hooks/use-now.md)

### Utilities

- [UIProvider](https://react-ui.bas.dev/utilities/ui-provider.md)
- [Shortcuts](https://react-ui.bas.dev/utilities/shortcuts.md)
- [Lazy loading](https://react-ui.bas.dev/utilities/lazy-loading.md)
- [Clipboard and selection](https://react-ui.bas.dev/utilities/clipboard.md)
- [Floating layers](https://react-ui.bas.dev/utilities/floating-layers.md)
- [Error messages](https://react-ui.bas.dev/utilities/error-messages.md)
- [Testing](https://react-ui.bas.dev/utilities/testing.md)