Kikumi3n Design System

A shared component library powering all applications in the Kikumi3n ecosystem — Main Portal, Task Management, Auto Trade, and Knowledge Base.

Why a Design System?

Problem	Solution
Inconsistent UI across apps	Shared components with unified styling
Repeated accessibility work	Built-in WCAG 2.1 AA compliance via Radix UI
Style conflicts in Module Federation	Scoped CSS class names (k3n-*)
Slow development	Pre-built, tested components

Packages

Package	Description	Install
@kikumi3n/tokens	Design tokens (CSS Variables + TypeScript)	pnpm add @kikumi3n/tokens
@kikumi3n/ui	React component library (46 components)	pnpm add @kikumi3n/ui

Architecture

@kikumi3n/tokens (design tokens)
    ↓ CSS Variables
@kikumi3n/ui (components)
    ↓ npm / Module Federation
Consumer Apps (Main Portal, MFEs)

Tech Stack

• React 18+ — Component runtime
• Radix UI — Headless accessible primitives (26 complex components)
• CSS Modules — Scoped styling, zero runtime
• Style Dictionary — Token pipeline (JSON → CSS Variables + TypeScript)
• Vite — Library build with native CSS Modules support

Features

• ✅ 46 components — From Button to DataTable, DatePicker, Modal
• ✅ Dark mode — Built-in theme switching via ThemeProvider
• ✅ Accessible — WCAG 2.1 AA compliance, keyboard navigation
• ✅ Type-safe — Full TypeScript support with exported prop interfaces
• ✅ Tree-shakable — ESM output, import only what you use
• ✅ Module Federation safe — Scoped class names, React as peer dependency

Quick Start

# Install packages
pnpm add @kikumi3n/ui @kikumi3n/tokens

# Import in your app
import { Button, ThemeProvider } from '@kikumi3n/ui';
import '@kikumi3n/tokens/css';
import '@kikumi3n/ui/styles.css';

→ See Installation for detailed setup.