kaizends

Kaizen Design System is a React component library built around semantic tokens, accessible themes, and reusable UI primitives.

Install

npm install kaizends

kaizends ships compiled component styles and theme tokens with the package, so consumers do not need to configure Tailwind just to render the components.

Use

import { Button, DesignSystemProvider } from "kaizends"

export function App() {
  return (
    <DesignSystemProvider defaultTheme="light">
      <Button>Click me</Button>
    </DesignSystemProvider>
  )
}

If you prefer explicit stylesheet control, import kaizends/style.css once in your app entry.

Theme Recipes

Kaizen Forge recipes can be installed with the bundled CLI:

npx kaizends@latest init --preset b5J6fpgi0

This writes kaizen.config.json with the selected recipe metadata and prints the provider snippet to use in your app. When your project has a src directory, the CLI also writes src/kaizen-preset.ts so the recipe can be imported by code instead of copied by hand. Use --out <path> if you want that generated module somewhere else.

import "kaizends/style.css"
import { DesignSystemProvider } from "kaizends"
import { KAIZEN_PRESET } from "./kaizen-preset"

export function App() {
  return (
    <DesignSystemProvider defaultPreset={KAIZEN_PRESET}>
      <YourApp />
    </DesignSystemProvider>
  )
}

Use npx kaizends@latest add preset <recipe-id> for an existing project, or npx kaizends@latest theme --preset <recipe-id> when you only want to save/update the theme recipe metadata. All three commands keep the generated preset module in sync.

For Figma, import the matching Tokens payload first from kaizendesign.site/import-to-figma, then import Icons and component payloads.

Themes

• light
• dark
• high-contrast-light
• high-contrast-dark
• system

Build

npm run build:package

• The publishable npm package is generated into dist.
• The docs app is generated into docs-dist.
• Token and component payloads are regenerated automatically before dev, build, and preview.
• The published npm package contains only the installable library assets needed by consumers.

Validation

npm run tokens:schema
npm run components:schema
npm run tokens:handoff
npm run tokens:color-audit