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/theme.css    ← BonsAI design tokens + Tailwind v4 theme (canonical)
  src/styles/globals.css  ← standalone Tailwind entry (used by Storybook)

Theming is CSS-first (Tailwind v4): theme.css holds the :root/.dark token values, the @theme inline mappings that turn them into utilities, the shared animations, and the base layer. There is no tailwind.config.js — each app owns a single CSS entry that does @import 'tailwindcss', imports @bonsai/ui/styles/theme.css, and declares @source for this library’s source (webapp: src/shared/styles/globals.css, nigari: src/shared/styles/base.css).