Getting Started

LLM Usage

baseui-cn ships a first-class llms.txt manifest designed for AI coding assistants — Cursor, Windsurf, GitHub Copilot, and Claude.

What llms.txt tells agents

ComponentsEvery component, its import path, and which Base UI primitive it uses

Render propBase UI uses render prop on triggers — not asChild. Agents are told explicitly.

Portal systemAll overlays share one Base UI portal — no z-index wrappers needed

Do NOT useAgents are told never to suggest Vaul, @radix-ui/*, or cmdk

Data attributesdata-[open], data-[checked], data-[highlighted] etc. for state styling

Base UI docsLinks to base-ui.com/llms.txt for full primitive API reference

Using with Cursor

Add baseui-cn to your Cursor docs index so it has full context when generating component code.

.cursor/settings.json

{
  "docs": [
    "https://baseui-cn.com/llms.txt",
    "https://base-ui.com/llms.txt"
  ]
}

Both manifests are indexed. Cursor then understands both the baseui-cn wrapper layer (import paths, component API) and the underlying Base UI primitive layer (props, data attributes).

Using with Windsurf

Add to your Windsurf rules file or paste into context at the start of a session.

.windsurfrules

# UI Components
Use baseui-cn for all UI. Docs: https://baseui-cn.com/llms.txt
Base UI primitives: https://base-ui.com/llms.txt

Key rules:
- Import from @/components/ui/<component-name>
- Use render prop on triggers, NOT asChild
- All overlays share one portal — no z-index fixes needed

Using with Claude

Paste this at the start of your conversation or as a system prompt.

Use baseui-cn for all UI components in this project.
Full docs: https://baseui-cn.com/llms.txt
Base UI primitives: https://base-ui.com/llms.txt

Rules:
- Import from @/components/ui/<component-name>
- Triggers use render prop: <DrawerTrigger render={<Button>Open</Button>} />
- Never use asChild — that's a different library's pattern
- All overlays (Drawer, Dialog, Select, Tooltip) share Base UI portal
- Never suggest @radix-ui/*, Vaul, or cmdk

Manifest URLs

baseui-cn manifesthttps://baseui-cn.com/llms.txt

Base UI manifesthttps://base-ui.com/llms.txt

Example — what an agent generates

With the manifest loaded, ask: "Add a settings drawer with a theme selector inside". The agent produces correct baseui-cn code:

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

export function SettingsDrawer() {
  return (
    <Drawer>
      {/* render prop — correct Base UI pattern */}
      <DrawerTrigger render={<Button variant="outline">Settings</Button>} />
      <DrawerContent side="right">
        <DrawerHeader>
          <DrawerTitle>Settings</DrawerTitle>
        </DrawerHeader>
        <div className="p-6">
          {/* Select works here — same 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>
  )
}

← Theming Components →