# drift-ui

> A shadcn-compatible component registry. Tags input, stepper, tree view, file dropzone and more, built on Radix or Base UI with Tailwind v4 and installed with the shadcn CLI.

Register the namespace with `npx shadcn@latest registry add @drift-ui=https://drift-ui.dev/r/{style}/{name}.json`, then install any item with `npx shadcn@latest add @drift-ui/<name>`. Each link below is the item's registry JSON, which contains its full source.

## Docs

- [Full usage docs](https://drift-ui.dev/llms-full.txt): setup steps, props and a usage example for every component
- [Registry index](https://drift-ui.dev/r/registry.json): machine readable list of every item

## Components

- [Avatar](https://drift-ui.dev/r/avatar.json): An image with a fallback for when it fails to load.
- [Avatar Group](https://drift-ui.dev/r/avatar-group.json): Stacked avatars with presence dots and a +N overflow that lists the rest.
- [Bulk Action Bar](https://drift-ui.dev/r/bulk-action-bar.json): A floating toolbar for acting on selected rows. Escape clears the selection.
- [Color Picker](https://drift-ui.dev/r/color-picker.json): Saturation area, hue and alpha sliders, eyedropper, hex input and an oklch readout.
- [Date-Time Range](https://drift-ui.dev/r/date-time-range.json): A date range picker with start and end times.
- [Description List](https://drift-ui.dev/r/description-list.json): Key and value rows for detail pages, with copy buttons and inline editing.
- [Diff Viewer](https://drift-ui.dev/r/diff-viewer.json): Side-by-side or unified text diff with word-level highlights and collapsed unchanged regions.
- [Emoji Picker](https://drift-ui.dev/r/emoji-picker.json): Searchable emoji grid with categories, skin tones, recently used emoji and arrow-key navigation. Emoji data loads on demand.
- [File Dropzone](https://drift-ui.dev/r/file-dropzone.json): Drag and drop upload with validation, progress and rejection states.
- [Filter Builder](https://drift-ui.dev/r/filter-builder.json): Field, operator and value filter chips with a matchesFilter helper for your rows.
- [Inline Edit](https://drift-ui.dev/r/inline-edit.json): Click to edit text in place. Enter saves, Escape cancels, async saves supported.
- [JSON Viewer](https://drift-ui.dev/r/json-viewer.json): Collapsible, searchable JSON with typed colors, copy value or path, and chunked large arrays.
- [Mention Textarea](https://drift-ui.dev/r/mention-textarea.json): A textarea that suggests people, channels or anything else after a trigger character.
- [Multi Select](https://drift-ui.dev/r/multi-select.json): Pick several values from a fixed list, with search, groups, chips and a selection limit.
- [Number Input](https://drift-ui.dev/r/number-input.json): A spinbutton with min, max, step and locale formatting.
- [Password Input](https://drift-ui.dev/r/password-input.json): A password field with a reveal toggle and a strength meter.
- [Rating](https://drift-ui.dev/r/rating.json): Pick a score with stars or any icon, in whole or half steps, from the keyboard or pointer.
- [Recurrence Editor](https://drift-ui.dev/r/recurrence-editor.json): Edit an RRULE repeat rule with a plain-language summary and the next occurrences.
- [Shortcut Recorder](https://drift-ui.dev/r/shortcut-recorder.json): Records a key combination and renders it with platform symbols.
- [Sortable List](https://drift-ui.dev/r/sortable-list.json): Reorderable list with drag-and-drop and full keyboard accessibility.
- [Stepper](https://drift-ui.dev/r/stepper.json): Multi-step flows with linear or free navigation.
- [Tags Input](https://drift-ui.dev/r/tags-input.json): Type, paste or remove tags with full keyboard support.
- [Time Field](https://drift-ui.dev/r/time-field.json): Segmented hour, minute and AM/PM spinbuttons with typeahead.
- [Timeline](https://drift-ui.dev/r/timeline.json): Activity feeds and changelogs with status indicators.
- [Tour](https://drift-ui.dev/r/tour.json): A step-by-step product tour that spotlights real elements on the page.
- [Tree View](https://drift-ui.dev/r/tree-view.json): An ARIA tree with arrow keys, typeahead, selection and lazy children.
- [Virtual List](https://drift-ui.dev/r/virtual-list.json): Renders only the visible rows of a long list, with variable row heights and keyboard focus that survives scrolling.

## Foundations

- [Badge](https://drift-ui.dev/r/badge.json): A small status label.
- [Button](https://drift-ui.dev/r/button.json): A button with six variants and four sizes.
- [Card](https://drift-ui.dev/r/card.json): A container with header, content, and footer slots.
- [Dialog](https://drift-ui.dev/r/dialog.json): A modal window that traps focus and closes on Escape.
- [Input](https://drift-ui.dev/r/input.json): A text input with focus and invalid states.
- [Label](https://drift-ui.dev/r/label.json): An accessible label for form controls.
- [Popover](https://drift-ui.dev/r/popover.json): Floating content anchored to a trigger.
- [Theme](https://drift-ui.dev/r/theme.json): Neutral color tokens for light and dark mode, with AA contrast for secondary text.
- [useControllableState](https://drift-ui.dev/r/use-controllable-state.json): State that works controlled or uncontrolled, with a change callback.
- [useCopyToClipboard](https://drift-ui.dev/r/use-copy-to-clipboard.json): Copy text to the clipboard and remember what was copied for a moment.
- [Utils](https://drift-ui.dev/r/utils.json): The cn() class merging helper.

## Optional

- [Live previews](https://drift-ui.dev/components): every component rendered with its install command