Skip to main content

​
Installation

Install Kuzenbo and set up your development environment to start building with composable React primitives.

​
Requirements

Kuzenbo requires the following peer dependencies:
  • React 19.0.0 or later
  • React DOM 19.0.0 or later
  • Tailwind CSS 4.0.0 or later (for styling)
Kuzenbo uses React 19 features and Base UI primitives for accessibility and composition.

​
Installing the core runtime

The core runtime consists of two required packages that work together:
  • @kuzenbo/core - UI primitives and composition building blocks
  • @kuzenbo/theme - Theme runtime, bootstrap script, and semantic tokens
bun add @kuzenbo/core @kuzenbo/theme
Always install @kuzenbo/core and @kuzenbo/theme together. The theme package provides semantic tokens that all UI components depend on.

​
Optional packages

​
Baseline styles

The @kuzenbo/styles package provides recommended global CSS for token-driven borders, scrollbar styling, and accessibility improvements. 
bun add @kuzenbo/styles

​
Standalone hooks

If you only need React hooks without UI components: 
bun add @kuzenbo/hooks
The @kuzenbo/hooks package has no theme dependency and can be used standalone.

​
Specialized UI packages

Install additional packages based on your needs: 
bun add @kuzenbo/charts
Packages marked as “Preview” are not yet published to npm. Their documented surface is evolving and can change before stable release.

​
Tailwind CSS configuration

Kuzenbo components use Tailwind CSS for styling. You need to configure Tailwind to include Kuzenbo’s source files:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@kuzenbo/core/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@kuzenbo/charts/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@kuzenbo/notifications/**/*.{js,ts,jsx,tsx}",
    // Add other Kuzenbo packages as needed
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
Only include the packages you’ve installed in your content array to keep build times fast.

​
TypeScript configuration

Kuzenbo is built with TypeScript and provides full type definitions. No additional configuration is required.
tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2022",
    "strict": true
  }
}

​
Verifying installation

Check that your packages are installed correctly: 
npm list @kuzenbo/core @kuzenbo/theme
You should see both packages listed with version 0.0.7 or later.

​
Next steps

Quick start

Build your first Kuzenbo app in 60 seconds.

Theming

Learn how to customize themes and implement light/dark mode.

Build docs developers (and LLMs) love

Get started for freeTalk to us