Getting Started

Installation

Set up baseui-cn in your Next.js or React project in two commands. Works with pnpm, npm, yarn, and bun.

Requirements

Node.js18.0 or later

React18.0 or later

Next.js15+ with App Router (recommended) or any React 18+ project

Tailwind CSSv4 (CSS-first config)

@base-ui/reactInstalled automatically by init

Step 1 — Initialize

Run this in your project root. It auto-detects your structure and sets everything up.

npx baseui-cn init

Prefer a specific stylesheet? Pass --css src/styles.css and baseui-cn will use that path instead of guessing.

Detects projectFinds Next.js, src/ dir, App Router vs Pages Router automatically

Installs deps@base-ui/react · clsx · tailwind-merge · class-variance-authority

CSS variablesPrompts for your stylesheet and injects theme tokens, including destructive, success, warning, and info

UtilsCreates lib/utils.ts with the cn() helper

ConfigWrites baseui-cn.json with your resolved paths

Step 2 — Add components

Each component is copied directly into your project. You own the code.

npx baseui-cn add button

Add several at once:

npx baseui-cn add dialog drawer select combobox

Or add everything:

npx baseui-cn add --all

Step 3 — Import and use

Components land in components/ui/. Import and use immediately.

app/page.tsx

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer"

export default function Page() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline">Open</Button>} />
      <DrawerContent side="right">
        <DrawerHeader>
          <DrawerTitle>Settings</DrawerTitle>
        </DrawerHeader>
        <div className="p-6">
          <Input label="Display name" placeholder="Aria Chen" />
        </div>
      </DrawerContent>
    </Drawer>
  )
}

baseui-cn.json

Created at your project root by init. Edit to change where components, utils, and theme styles are placed.

baseui-cn.json

{
  "componentsPath": "src/components/ui",
  "utilsPath": "src/lib/utils",
  "globalCss": "src/app/globals.css",
  "tailwind": true,
  "rsc": true
}

Manual installation

Prefer to set things up yourself? Install the dependencies and copy components manually.

pnpm add @base-ui/react class-variance-authority clsx tailwind-merge

Then add the CSS variables from the Theming page to your main stylesheet and create lib/utils.ts:

lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Already have a design system?

baseui-cn uses the same CSS variable naming convention as other registry-style systems. If you already have --background, --primary, etc. in your stylesheet, components will pick them up automatically.

Theming →LLM usage →