Docs

Getting started

Run the playground locally, then copy the source into your own Next.js app.

Playground

Requires pnpm.

pnpm install
pnpm dev

Open http://localhost:1234. Start at Playground, Theme, or Components.

Install the skill

So agents follow tokens and compound APIs in your app.

npx skills add qilei0529/bon-ui

Installs skills/bon-ui/ into .agents/skills/.

Or copy skills/bon-ui/ to .agents/skills/bon-ui. Live docs: Skill.

Use in another app

Copy source. There is no npm package yet.

Copy components/, lib/, bon.config.ts, and the token CSS in app/globals.css. Keep the @/ import alias.

In the root layout, inject config CSS with getBonConfigCss(bonConfig) and set data-palette, data-button-radius, and data-panel-radius on html. Theme prefs only toggle those attrs (and class for dark mode) — not inline CSS variables. Keep ToastProvider, TooltipProvider, and ThemeTransitionProvider at the root.

Import from @/components/ui/*, not @base-ui/react. Props: Reference.