A shadcn-compatible component registry built on React 19, Tailwind v4, and Radix or Base UI. It covers the components shadcn/ui leaves out, like a tags input, stepper, tree view and file dropzone, and installs them with the shadcn CLI.
Browse the live previews at drift-ui.dev.
55 components, grouped the same way as the docs site. The primitives have the same API as their shadcn/ui counterparts, so skip any you already have. Every component page has a live preview, its source, install steps and an Open in v0 link.
| Category | Components |
|---|---|
| Inputs | Color Picker, Date-Time Range, Duration Input, Emoji Picker, File Dropzone, Image Cropper, Inline Edit, Key Value Editor, Masked Input, Mention Textarea, Multi Select, Number Input, Password Input, Phone Input, Rating, Recurrence Editor, Secret Field, Shortcut Recorder, Signature Pad, Tags Input, Time Field, Timezone Picker, Unit Input |
| Structure | Activity Heatmap, Avatar Group, Description List, Diff Viewer, JSON Viewer, Log Viewer, Sortable List, Stepper, Timeline, Trace Waterfall, Tree View, Uptime Bar, Virtual List |
| Workflow | Bulk Action Bar, Comment Thread, CSV Importer, Filter Builder, Notification Inbox, Onboarding Checklist, Permission Matrix, Saved Views, Shortcut Cheatsheet, Tour, Transfer List |
| Primitives | Avatar, Badge, Button, Card, Dialog, Input, Label, Popover |
In a project that already ran npx shadcn init, install the theme and any component:
npx shadcn add @drift-ui/theme @drift-ui/tags-input @drift-ui/tree-view@drift-ui is listed in the shadcn registry directory, so the CLI knows the namespace without any setup. Registry dependencies such as utils, button and use-controllable-state are installed automatically.
The CLI picks a build from the style in your components.json. A base- style such as base-nova gets the Base UI build, which never installs radix-ui, and any other style gets Radix. A @drift-ui entry under registries in components.json overrides the directory, so if you registered the older /r/{name}.json URL you will keep getting Radix until you delete that entry.
The same style picks the shape tokens. Components that need them depend on @drift-ui/shape, which adds control height, corner and shadow tokens to the @theme inline block in your CSS. A shadcn create style such as radix-nova or base-lyra gets the matching values for Vega, Nova, Maia, Lyra, Mira, Luma, Sera or Rhea, and any other style, including new-york, gets Vega. To switch styles later, change style in components.json and run npx shadcn add @drift-ui/shape again. Try each style on /themes before you install.
The site serves /llms.txt with an index of the registry and /llms-full.txt with install commands, usage notes and examples for every component.
To let a coding agent search and install components itself, set up the shadcn MCP server in a project that has a components.json:
npx shadcn@latest mcp init --client claude # or cursor, vscode, codex, opencodeName the namespace when you ask, for example "add @drift-ui/tags-input" or "search @drift-ui for a date picker". The server only searches registries in components.json by default, and naming @drift-ui makes it look there too.
git clone https://github.com/drift-ui/ui.git
cd ui
bun install
bun run registry:build
bun devThe site runs at http://localhost:3000 and the built registry at http://localhost:3000/r/{name}.json.
| Command | What it does |
|---|---|
bun dev |
Start the dev server |
bun run registry:build |
Rebuild public/r/*.json from registry.json |
bun run test |
Run the Vitest suite |
bun run typecheck |
Type-check with tsc --noEmit |
bun run lint |
Run ESLint |
bun run format |
Format with Prettier |
bun run build |
Build the registry, then the production site |
registry.json item manifest read by `shadcn build`
registry/default/ui/*.tsx component source
registry/default/lib/*.ts cn() helper and pure logic behind components
registry/default/hooks/*.ts shared hooks such as use-controllable-state
components/preview/* live demos, also used as usage examples in the docs
components/docs/* docs site UI
components/landing/* landing page sections
lib/catalog.ts component categories, alphabetical within each
lib/agent-docs/* content for /llms.txt and /llms-full.txt
tests/ Vitest suites for components and lib code
public/r/*.json gitignored build output, served as static files
Bug reports, component requests and pull requests are welcome. Open an issue to report a bug or request a component. Read CONTRIBUTING.md for setup, the steps to add a component, and the commit conventions. Coding agents start from AGENTS.md. Everyone with a merged pull request is listed on the contributors page.