A themeable React component library. OKLCH design tokens, Radix UI primitives, Tailwind v4, class-variance-authority. 33+ components, full light/dark support, and single-token brand retheming.

npm install
npm run dev

Open the printed local URL — the running app is a live showcase of every component.

• Token-driven color — every color ramp (accent, gray, success, warning, danger, info) is a 12-step OKLCH scale generated in pure CSS via relative-color syntax (oklch(from var(--seed) L C h)) and light-dark(). No JS color math, no duplicated light/dark blocks.
• One-token rebrand — change --accent-seed (any CSS color: hex, oklch, hsl) and the whole accent ramp regenerates. See src/components/theme/accent-picker.tsx.
• Light / dark / system — useTheme() from src/components/theme/theme-provider.tsx.
• Accessible by default — every interactive component wraps a Radix UI primitive (keyboard nav, focus management, ARIA already handled).
• Agent-ready — CLAUDE.md gives coding agents a component inventory, token cheat sheet, and retheming API so generated UI stays on-system.

src/
  styles/
    tokens.css     design tokens (colors, spacing, radius, type, shadow, motion)
    index.css      Tailwind import + @theme mapping + base layer
  components/
    theme/         ThemeProvider, ThemeSwitcher, AccentPicker
    ui/             component library (one file per component)
  lib/utils.ts      cn() helper
  hooks/use-toast.ts

See CLAUDE.md for the architecture rationale and the component-authoring pattern.

MIT © Роман Кудрявский