Accessible React components.Own the source. Build your system.
An accessible, copy-and-own React component library built with Base UI and Tailwind CSS. Bring editable source into your project and make every detail yours.
Your next interface, taking shape.
Filter work, pick a date, edit a task. Real components, working together.
Good work, coming together.
A clear plan. A few thoughtful components.
| Complete | Task | Owner | Status | Details |
|---|---|---|---|---|
| UI-101 | Avery | Done | ||
| UI-102 | Morgan | In progress | ||
| UI-103 | Sam | Done | ||
| UI-104 | Avery | In progress | ||
| UI-105 | Morgan | In progress | ||
| UI-106 | Sam | In progress |
Less setup.
More building.
Initialize once. Add what you need. Framework-aware setup finds your app, your package manager and your workspace.
Follow the installation guidenpx baseui-cn@latest initnpx baseui-cn@latest add button input dialogInside an existing React app with Tailwind CSS v4.
Using Yarn? The dlx runner requires Yarn 2+.
The source is the point.
The CLI brings components into your project. Change the markup, adjust the styles, or build something entirely new. Updates happen on your terms.
- Editable TypeScript and CSS
- No baseui-cn runtime package to depend on
- Base UI handles the behavior underneath
// Your component. Your decisions.
import { Button as ButtonPrimitive }
from "@base-ui/react/button"
export function Button(props) {
return <ButtonPrimitive {...props} />
}Is 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.
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.
A theme that speaks your language.
26 familiar CSS variables. Light and dark, considered together.
No proprietary --cn-* names to learn. Just your design decisions.
:root {--background#f8f9fb;--foreground#20242c;--primary#5b55c9;--accent#eff0ff;--ring#6673e8;--border#dedee3;--input#7d8797;--radius0.75rem;}Same components.
Your point of view.
Iris · Rounded. Your starting point, in ordinary CSS.
Make it yoursGood foundations.
All the way down.
The details you notice.
The foundations you trust.
Built on Base UI, the unstyled React component library from the creators of Material UI and Radix. A shared behavior layer for interfaces that hold together.
Keyboard & focus
Keyboard navigation, focus management and accessible semantics built into the primitives.
Layers that cooperate
Positioning, portals and dismiss behavior designed to work across menus, dialogs and popovers.
Room to compose
Unstyled primitives underneath. Your markup, styling and component composition on top.
A few pieces, already together.
3 real blocks. The same components, composed into useful starting points.
Make room for your next idea.
A clear next step, even when there's nothing to show.
Empty State
Empty state with icon, title, description, and action.
components/ui/blocks.tsxLogin
Card-based login form built with Base UI Form, alerts, and toast success states.
components/ui/auth.tsxSign Up
Card-based signup form built with Base UI Form, password rules, alerts, and success toasts.
components/ui/auth.tsx