baseui-cnIs baseui-cn a shadcn-style registry for Base UI components?
Yes. baseui-cn gives you the same copy-and-own developer experience people expect from shadcn-style tools, but the components are built on Base UI primitives instead of a mixed stack.
All Base UI primitives covered · one primitive library for your app
Base UI components for React.
shadcn-style install.
An open-source registry of shadcn-style Base UI components for React and Next.js. Copy accessible components into your project, own the code, and build forms, fields, drawers, dialogs, selects, and the rest of your application on one primitive library with Tailwind CSS.
49 components|3 blocks|1 primitive library for the whole app|MIT license
No more broken interactions
One overlay system. Everything composes.
If you are searching for shadcn Base UI components, baseui-cn gives you the same copy-and-own workflow while staying fully on Base UI primitives. That means one portal system, one focus model, and fewer overlay bugs.
Mixed libraries (Radix + Vaul + Sonner)
Select inside Drawer breaks focus
Closing toast dismisses the Drawer
Combobox portal renders behind overlay
z-index hacks between libraries
baseui-cn (Base UI only)
Select inside Drawer works correctly
Close toast — Drawer stays open
Combobox inside any overlay, no workaround
One portal system, zero z-index conflicts
Built for real apps, not just demos.
Button
Outline
Button
DefaultSecondaryOutline
Badge
Email
you@example.com
Input
Framework
Next.js
Select
JD
AB
+3
Avatar
Option A
Option B
Checkbox
Off
On
Switch
Loading…68%
Progress
Button
Outline
Button
DefaultSecondaryOutline
Badge
Email
you@example.com
Input
Framework
Next.js
Select
JD
AB
+3
Avatar
Option A
Option B
Checkbox
Off
On
Switch
Loading…68%
Progress
Built differently
⬡
Single primitive layer
Every interactive component — dialogs, drawers, selects, tooltips, toasts, menus — is built on Base UI. One library, one overlay system, one portal. No conflicts when composing.
◫
Drawer & Toast without workarounds
Base UI Drawer (stable v1.3.0) and Toast share the same portal system as Select, Combobox, and Dialog. Nest them freely — no Vaul, no Sonner, no event conflicts.
◻
Your code, fewer deps
Components are copied directly into your project — one primitive library instead of four or five. No Radix, no Vaul, no Sonner, no cmdk. Lighter installs, smaller bundles, one API to learn.
How it works
01
npx baseui-cn initAuto-detects your project. Installs deps, writes CSS variables, creates lib/utils.ts.
02
npx baseui-cn add drawerFetches the component from the registry and copies it into your project.
03
import { Drawer } from '@/components/ui/drawer'Use it. Edit it. It's your code now.
Works with your stack
Next.jsViteRemixAstroAny React project
baseui-cn cli
Detecting project structure...Found app router, Tailwind, and src aliases.[ok] @base-ui/react installed[ok] Theme tokens added to your stylesheet[ok] lib/utils.ts createdResolving dependencies...[ok] login -> components/ui/auth.tsx[ok] data-grid -> components/data-grid/*[ok] command -> components/ui/command.tsxDone. One primitive library, zero portal conflicts.terminal
$npx baseui-cn init
Detecting project structure...
✓ @base-ui/react installed
✓ CSS variables added to your selected stylesheet
✓ lib/utils.ts created
$npx baseui-cn add drawer select combobox
Resolving dependencies...
✓ drawer → components/ui/drawer.tsx
✓ select → components/ui/select.tsx
✓ combobox → components/ui/combobox.tsx
Done. Components are yours — edit freely.
Components
View all docs →Start with the newest interactive demosNew
The fastest way to understand what is different here is to try the AI command search demo and the optimistic-editing data grid demo first.
Try AI Command Search Demo
Open the richer command palette demo with grouped results, keyboard flows, and AI-style search interactions.
Open command docs →
Try Data Grid Optimistic Updates
Explore inline editing, pending states, rollback handling, and the optimistic update workflow in one installable family.
Open data-grid docs →
Quick filters for the most-used component groups
A clickable element that triggers an action.
npx baseui-cn add buttonA small status descriptor for UI elements.
npx baseui-cn add badgeA semantic feedback container for errors, warnings, and status messaging.
npx baseui-cn add alertAn image element with a fallback for representing the user.
npx baseui-cn add avatarA container for grouping related content and actions.
npx baseui-cn add cardA flexible list item component with media, content, actions, and variants.
npx baseui-cn add itemVisually or semantically separates content.
npx baseui-cn add separatorAugments native scroll functionality for custom, cross-browser styling.
npx baseui-cn add scroll-areaLoading placeholder with pulse animation.
npx baseui-cn add skeletonAn animated loading spinner indicator.
npx baseui-cn add spinnerDisplays an indicator showing the completion progress of a task.
npx baseui-cn add progressA two-state button that can be toggled on or off.
npx baseui-cn add toggleA set of two-state buttons grouped together.
npx baseui-cn add toggle-groupA text input field.
npx baseui-cn add inputA multi-line text input field.
npx baseui-cn add textareaAccessible form label with required indicator.
npx baseui-cn add labelA form field component that provides labeling, description, and validation for form controls.
npx baseui-cn add fieldA Base UI form wrapper for submission handling, validation wiring, and consistent layout.
npx baseui-cn add formA semantic form section wrapper with a legend for grouped inputs.
npx baseui-cn add fieldsetA control that allows the user to toggle between checked and unchecked states.
npx baseui-cn add checkboxA semantic group for managing multiple related checkboxes with shared state.
npx baseui-cn add checkbox-groupA control that allows the user to toggle between checked and not checked.
npx baseui-cn add switchA set of checkable buttons where no more than one can be checked at a time.
npx baseui-cn add radio-groupDisplays a list of options for the user to pick from, triggered by a button.
npx baseui-cn add selectAn input combined with a listbox for selecting from a list of options.
npx baseui-cn add comboboxAn input with a list of filtered options that appear as the user types.
npx baseui-cn add autocompleteAn input where the user selects a value from within a given range.
npx baseui-cn add sliderA numeric input with increment and decrement buttons.
npx baseui-cn add number-fieldA one-time password input composed of individual character slots.
npx baseui-cn add otp-fieldA composite input component with addons, icons, and buttons.
npx baseui-cn add input-groupA window overlaid on either the primary window or another dialog window.
npx baseui-cn add dialogA modal dialog that interrupts the user with important content and expects a response.
npx baseui-cn add alert-dialogA panel that slides in from the edge of the screen.
npx baseui-cn add drawerDisplays rich content in a portal, triggered by a button.
npx baseui-cn add popoverA popup that displays information related to an element when focused or hovered.
npx baseui-cn add tooltipA card that appears on hover to preview linked content.
npx baseui-cn add preview-cardDisplays a menu to the user, such as a set of actions or functions, triggered by a button.
npx baseui-cn add dropdown-menuA succinct message that is displayed temporarily.
npx baseui-cn add toastA command palette component for searching and executing actions.
npx baseui-cn add commandAn interactive component which expands or collapses a panel.
npx baseui-cn add collapsibleA vertically stacked set of interactive headings that each reveal a section of content.
npx baseui-cn add accordionA layered panel shell for grouping sections, headers, and supporting content.
npx baseui-cn add frameA set of layered sections of content known as tab panels that are displayed one at a time.
npx baseui-cn add tabsSemantic table primitives for displaying data.
npx baseui-cn add tableA composable TanStack data grid family with editing, virtualization, drag-and-drop, and Base UI-friendly controls.
npx baseui-cn add data-gridDisplays the path to the current resource using a hierarchy of links.
npx baseui-cn add breadcrumbPage navigation with first, last, next, and previous buttons.
npx baseui-cn add paginationA visually persistent menu common in desktop applications providing quick access to commands.
npx baseui-cn add menubarA collection of navigation links with sub-menus that appear on hover.
npx baseui-cn add navigation-menuEmpty state with icon, title, description, and action.
npx baseui-cn add empty-stateCard-based login form built with Base UI Form, alerts, and toast success states.
npx baseui-cn add loginCard-based signup form built with Base UI Form, password rules, alerts, and success toasts.
npx baseui-cn add signup52 of 52 installables
AI-ready
Works with Cursor, Windsurf, and Claude
baseui-cn ships a first-class llms.txt manifest. AI agents read it to understand every component, its import path, usage patterns, and which dependencies belong to this project.
In Cursor or Claude:
"Add a drawer with a combobox inside"
Agent reads llms.txt, knows:
→ Drawer from @/components/ui/drawer
→ Combobox from @/components/ui/combobox
→ Both share Base UI portal — no z-index fix needed
→ Use render prop, not asChild
Latest release
Combobox And Fieldset Legend Upgrade
April 22, 2026
A component-focused release that improves combobox usability, expands the public API, and adds more styling control to FieldsetLegend.
Added a more flexible Combobox trigger API with optional built-in icons and support for custom trigger-button layouts.
Improved ComboboxInput with start addons, optional autofocus control, and clearer built-in clear-button behavior while typing.
Expanded multi-select Combobox support with richer chip layouts, removable chips, and an overflow pattern for larger selections.
Common questions
What teams ask when they want Base UI components
baseui-cn is a Base UI-first component registry with a shadcn-style workflow. Start with the documentation, install with npx baseui-cn init, and browse components like Drawer and Select.
Why use Base UI components instead of mixing Radix, Vaul, Sonner, and cmdk?
Because overlays compose more reliably when they share one primitive layer. baseui-cn keeps drawers, dialogs, selects, comboboxes, and toasts on Base UI so focus, portals, and layering stay consistent.
Do I keep the code after installing a component?
Yes. Components are copied directly into your project, so you can edit the code, theme it with Tailwind CSS, and ship it without depending on a runtime component package.
Start building
One command to initialize. One command per component. Everything else is yours.
$npx baseui-cn init
Read the docs