Getting Started

Introduction

baseui-cn is a Base UI-first open component registry with a shadcn-style developer experience. Copy components into your project, own the code, style with Tailwind.

What it is

Every interactive component — dialogs, drawers, selects, tooltips, menus — is built on Base UI. One library, one overlay system, one portal. No conflicts when composing components inside each other.

Base UI's Drawer became stable in v1.3.0 (March 2026). That closed the last gap — so Select, Combobox, Tooltip, and Drawer all share the same portal system. Nesting floating components inside a Drawer just works.

Core principles

Base UI onlyEvery interactive primitive is from @base-ui/react. One library, one overlay system.

Tailwind CSSStyled with Tailwind v4. No CSS-in-JS, no runtime style injection.

You own the codeComponents are copied into your project. Edit freely. No version lock-in.

shadcn-compatible tokensSame CSS variable names — --background, --primary, etc. Themes transfer directly.

RSC-aware"use client" only where required. Works with Next.js App Router.

LLM-readyFirst-class llms.txt for AI coding assistants. Works with Cursor, Windsurf, and Claude.

Quick start

1. Initialize baseui-cn in your project:

npx baseui-cn init

2. Add components:

npx baseui-cn add button drawer select

3. Or add everything at once:

npx baseui-cn add --all

4. Import and use:

import { Button } from "@/components/ui/button"
import {
  Drawer, DrawerTrigger, DrawerContent,
  DrawerHeader, DrawerTitle,
} from "@/components/ui/drawer"
import { Select, SelectTrigger, SelectContent, SelectItem } from "@/components/ui/select"

export function Example() {
  return (
    <Drawer>
      {/* render prop — Base UI pattern, not asChild */}
      <DrawerTrigger render={<Button variant="outline">Settings</Button>} />
      <DrawerContent side="right">
        <DrawerHeader>
          <DrawerTitle>Settings</DrawerTitle>
        </DrawerHeader>
        <div className="p-6">
          {/* Select works here — same Base UI portal as Drawer */}
          <Select>
            <SelectTrigger placeholder="Select theme..." />
            <SelectContent>
              <SelectItem value="light">Light</SelectItem>
              <SelectItem value="dark">Dark</SelectItem>
              <SelectItem value="system">System</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

Base UI uses the render prop, not asChild

If you're coming from Radix UI or shadcn, the trigger pattern is different. Base UI uses a render prop instead of asChild.

// ❌ Radix / shadcn pattern — does not work with Base UI
<DialogTrigger asChild>
  <Button>Open</Button>
</DialogTrigger>

// ✅ Base UI pattern — always use this
<DialogTrigger render={<Button variant="outline">Open</Button>} />

Installation →Components →