@anandmoon/kaizen-design-system

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

Install

npm install @anandmoon/kaizen-design-system

@anandmoon/kaizen-design-system 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 "@anandmoon/kaizen-design-system"

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

If you prefer explicit stylesheet control, import @anandmoon/kaizen-design-system/style.css once in your app entry.

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