UI Components & Storybook #

BonsAI uses a shared component library @bonsai/ui (35 shadcn/radix components) consumed by the webapp as a JIT source package.

Storybook #

All components in @bonsai/ui have Storybook stories. Use Storybook to browse, test, and develop UI components in isolation.

Dev workspace #

Storybook does not start automatically in the dev workspace. Run it manually:

mise storybook

Then open the Storybook app from your Coder workspace sidebar (port 6006).

Preview environments #

Storybook starts automatically alongside the webapp in all preview environments — no manual step needed.

Adding new components #

New shadcn components go into @bonsai/ui:

cd libs/typescript/ui
pnpm dlx shadcn@latest add <component>

Every component must have a co-located .stories.tsx file — CI enforces this via mise run ui-stories-check.

Structure #

libs/typescript/ui/
  src/components/   ← 35 pure shadcn components (+ stories)
  src/lib/utils.ts  ← cn() helper
  src/styles/globals.css  ← BonsAI design tokens (canonical)
  tailwind.config.js      ← shared Tailwind config (canonical)

The webapp extends both: tailwind.config.ts spreads @bonsai/ui/tailwind, and globals.css imports @bonsai/ui/styles/globals.css from layout.tsx.