The componentsshadcn left out

Tags input, tree view, stepper and 13 more. Built on Radix or Base UI, styled by the tokens you already have.

Browse components

Same tokens, same primitives, same CLI.

drift-ui fills the gaps in shadcn/ui without asking you to adopt another design system. The 26 in blue are ours.

Eight gaps in your ui folder

Each one is a single file you own after install, with the same props conventions, cva variants and keyboard behavior as the rest of your ui folder.

Type, paste or pick. Backspace removes, arrows move between tags.

Docs

Eight more. Every demo is live.

Filters, tours, bulk actions and the inputs settings screens keep asking for. Every demo below is the real component, so go ahead and use it.

Status
Filter builder

Field, operator and value as chips, plus a matchesFilter helper for your rows.

Shortcut recorder

Press a combination, get ⌘K on a Mac and Ctrl K elsewhere.

Bulk action bar

Appears with the selection, arrow keys between actions, Escape clears.

Color picker

Area, hue, alpha and eyedropper, with the oklch value your theme uses.

Mention textarea

People after @, channels after #, any list after any trigger.

0930AM
to
0545PM
Time field

Segmented spinbuttons with typeahead, in 12 or 24 hour time.

Workspace
Region
Inline edit

Click to edit. Enter saves, Escape cancels, async saves wait.

Tour

Spotlights real elements and follows them as the page moves.

No new design system to learn

Each file reads like the rest of your ui folder: your variables, your primitives, your class names.

New projectDraft
stagingeu-west-1

Whole screens, not just parts

shadcn ships login, signup and sidebars. These cover the screens after that, composed from the components above.

Browse all blocks
Onboardingsteppertags-inputnumber-input
Team invitetags-input
Security settingspassword-input
File managertree-viewfile-dropzone
Release schedulerdate-time-rangetimeline
Audit logtags-inputtimeline
Install

Hand it to your agent

Copy one prompt and your coding agent reads llms.txt, registers the namespace and installs only what the task needs.

Or install it yourself

components.json
{
  "registries": {
    "@drift-ui": "https://drift-ui-dev.vercel.app/r/{style}/{name}.json"
  }
}

Needs a project that already ran shadcn init.

Prompt for your coding agentPaste into Claude Code, Cursor, Codex or any agent with a terminal
Install components from the drift-ui registry into this project.

drift-ui is a shadcn-compatible component registry built on Radix or Base UI with Tailwind v4. Read https://drift-ui-dev.vercel.app/llms.txt for the component list and https://drift-ui-dev.vercel.app/llms-full.txt for props and usage examples before writing code.

1. Make sure the project uses shadcn. If there is no components.json, run `npx shadcn@latest init` and accept the defaults that match the project.
2. Register the namespace: `npx shadcn@latest registry add @drift-ui=https://drift-ui-dev.vercel.app/r/{style}/{name}.json`. The CLI fills in {style} from components.json, so a `base-` style gets the Base UI build and any other style gets Radix.
3. Choose the components this task needs from llms.txt and install them, for example `npx shadcn@latest add @drift-ui/tags-input @drift-ui/stepper`. The CLI also installs their registry and npm dependencies.
4. Import them from the project's ui alias, usually @/components/ui/<name>. Compose them in feature code rather than editing the installed files, and keep the project's existing theme tokens.
5. Run the project's typecheck and lint, then list the components you installed and where you used them.

Optional: `npx shadcn@latest mcp init --client <client>` (claude, cursor, vscode, codex or opencode) lets you search and install from the registry over MCP.

Fill the gaps.Keep your system.

Browse components