BakeThere CLI

Add BakeThere components to your project.

npx bakethere add button
npx bakethere add card dialog toast

Initialize BakeThere in your project. Creates bakethere.json and copies shared infrastructure files (tokens, globals CSS, provider, utils).

Add one or more components. If no component names are given, an interactive picker is shown.

Options:

• --overwrite / -o — overwrite existing files
• --path <dir> — write component files to this directory instead of the configured one
• --yes / -y — skip prompts, use defaults

Export one or more components as plain HTML + a standalone CSS file — no React, no Tailwind required to use the output.

npx bakethere export button badge
npx bakethere export --all
npx bakethere export button --output ./my-html

Each component gets its own {name}.html file (full document with all variants) plus a shared styles.css that includes all three themes and the resolved utility classes. Open the HTML files directly in a browser — no build step needed.

Options:

• --all / -a — export all 31 components
• --output <dir> / -o — output directory (default: ./bakethere-html)
• --overwrite — overwrite existing files without prompting
• --yes / -y — skip interactive prompts

Show all available components grouped by category.

After running init, add these imports to your globals.css:

@import './src/styles/bakethere-tokens.css';
@import './src/styles/bakethere-globals.css';

Then wrap your app in <BakeThereProvider>:

import { BakeThereProvider } from '@/components/ui/BakeThereProvider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <BakeThereProvider defaultTheme="dark">
          {children}
        </BakeThereProvider>
      </body>
    </html>
  );
}

Primitives: button, button-group, input, label, checkbox, toggle, text, textarea, radio, slider, select

Display: card, badge, avatar, separator, skeleton, stat, empty, alert, progress

Overlay: dialog, tooltip, toast, popover

Navigation: dropdown-menu, tabs, accordion, breadcrumb

Data: table

Layout: sidebar, header

BakeThere ships with three themes: dark, warm, plain. Pass defaultTheme to BakeThereProvider.