KARAKURI Design System

Enterprise React component library with design token system.

📖 KARAKURI Design System

Quick Start

Components + Tokens

npm install @karakuri-ui/react @karakuri-ui/tokens

Tokens Only

npm install @karakuri-ui/tokens

Tailwind v4

@import "tailwindcss";

@import '@karakuri-ui/tokens/tailwind/v4.css';

@source "../node_modules/@karakuri-ui/react/dist";

Tailwind v3

@import '@karakuri-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

// tailwind.config.js
module.exports = {
  presets: [require('@karakuri-ui/tokens/tailwind/v3-preset')],
  content: [
    './node_modules/@karakuri-ui/react/dist/**/*.{js,mjs}',
  ],
}

Usage

import { Button, Card, CardHeader, CardTitle, CardContent } from '@karakuri-ui/react'
import { Chart, type ChartConfig } from '@karakuri-ui/react/chart'  // charts: separate entry

<Button variant="solid" color="primary">Get Started</Button>

<Card>
  <CardHeader>
    <CardTitle>Settings</CardTitle>
  </CardHeader>
  <CardContent>...</CardContent>
</Card>

Tech Stack

| | | |---|---| | Framework | React 18 + TypeScript | | Styling | Tailwind CSS v3 / v4 + CSS Variables | | Primitives | Radix UI | | Charts | Recharts | | Tokens | Figma Token Studio → sync-tokens | | Build | tsup (library), Next.js (docs) |

Roadmap

• [ ] Chat components — TypingIndicator, QuickReply, ChatInput, ChatMessage
• [ ] Token Playground — live token editor with real-time preview
• [ ] Figma design kit — component library for designers