Skip to main content

​
Quick start

Get up and running with Kuzenbo in 60 seconds. This guide walks you through creating a simple dashboard with theming support.

​
Installation

First, install the core runtime packages: 
bun add @kuzenbo/core @kuzenbo/theme @kuzenbo/styles

​
Basic setup

1

Import theme and styles

Import the prebuilt Kuzenbo theme and recommended baseline styles at the top of your app:
app.tsx
import "@kuzenbo/theme/prebuilt/kuzenbo.css";
import "@kuzenbo/styles/recommended.css";
The theme CSS provides semantic color tokens, and the styles CSS provides sensible global defaults for scrollbars, focus rings, and accessibility.
2

Import components

Import the components you need from @kuzenbo/core and the theme utilities from @kuzenbo/theme:
app.tsx
import {
  Announcement,
  AnnouncementTag,
  AnnouncementTitle,
} from "@kuzenbo/core/ui/announcement";
import { Button } from "@kuzenbo/core/ui/button";
import { Card } from "@kuzenbo/core/ui/card";
import { ThemeBootstrapScript, ThemeProvider } from "@kuzenbo/theme";
Kuzenbo uses granular imports to enable tree-shaking and keep bundle sizes small.
3

Add theme bootstrap and provider

Wrap your app with ThemeProvider and add ThemeBootstrapScript to prevent theme flashing:
app.tsx
export default function App() {
  return (
    <>
      <ThemeBootstrapScript />
      <ThemeProvider>
        {/* Your app content */}
      </ThemeProvider>
    </>
  );
}
The ThemeBootstrapScript runs before React hydrates to apply the correct theme immediately, preventing a flash of unstyled content.
4

Build your UI

Use semantic color tokens and composable primitives to build your interface:
app.tsx
<main className="bg-background text-foreground min-h-screen p-6">
  <div className="mx-auto grid max-w-3xl gap-4">
    <Announcement themed>
      <AnnouncementTag>Release</AnnouncementTag>
      <AnnouncementTitle>Kuzenbo is ready to ship.</AnnouncementTitle>
    </Announcement>

    <Card className="p-6">
      <h1 className="text-xl font-semibold">Dashboard</h1>
      <p className="text-muted-foreground mt-2">
        Build with semantic tokens and composable primitives.
      </p>
      <div className="mt-4 flex gap-2">
        <Button>Create Report</Button>
        <Button variant="outline">View Logs</Button>
      </div>
    </Card>
  </div>
</main>

​
Complete example

Here’s the full working example:
app.tsx
import "@kuzenbo/theme/prebuilt/kuzenbo.css";
import "@kuzenbo/styles/recommended.css";

import {
  Announcement,
  AnnouncementTag,
  AnnouncementTitle,
} from "@kuzenbo/core/ui/announcement";
import { Button } from "@kuzenbo/core/ui/button";
import { Card } from "@kuzenbo/core/ui/card";
import { ThemeBootstrapScript, ThemeProvider } from "@kuzenbo/theme";

export default function App() {
  return (
    <>
      <ThemeBootstrapScript />
      <ThemeProvider>
        <main className="bg-background text-foreground min-h-screen p-6">
          <div className="mx-auto grid max-w-3xl gap-4">
            <Announcement themed>
              <AnnouncementTag>Release</AnnouncementTag>
              <AnnouncementTitle>Kuzenbo is ready to ship.</AnnouncementTitle>
            </Announcement>

            <Card className="p-6">
              <h1 className="text-xl font-semibold">Dashboard</h1>
              <p className="text-muted-foreground mt-2">
                Build with semantic tokens and composable primitives.
              </p>
              <div className="mt-4 flex gap-2">
                <Button>Create Report</Button>
                <Button variant="outline">View Logs</Button>
              </div>
            </Card>
          </div>
        </main>
      </ThemeProvider>
    </>
  );
}

​
Understanding the example

​
Semantic color tokens

Kuzenbo uses semantic color tokens that automatically adapt to light and dark mode:
  • bg-background - Main background color
  • text-foreground - Primary text color
  • text-muted-foreground - Secondary/muted text color
Using semantic tokens ensures your UI looks consistent across all themes without hardcoding colors.

​
Component composition

Components like Announcement and Card follow a composition pattern: 
<Announcement themed>
  <AnnouncementTag>Release</AnnouncementTag>
  <AnnouncementTitle>Kuzenbo is ready to ship.</AnnouncementTitle>
</Announcement>
This gives you full control over the content and styling while maintaining accessibility.

​
Button variants

Buttons support multiple variants through the variant prop: 
<Button>Create Report</Button>
<Button variant="outline">View Logs</Button>
Available variants include: default, outline, ghost, destructive, and link.

​
Next steps

Theming

Learn about theme customization and prebuilt themes.

Styling

Understand the styling system and customization.

Components

Explore all available components.

Build docs developers (and LLMs) love

Get started for freeTalk to us