kairos-ui

The Kairos design system as copy-and-own source. One command drops 69 React components, design tokens and webfonts into your project — no runtime dependency, no build step. You own the files and edit them freely.

Usage

npx @theojustin/kairos-ui init

By default this creates src/kairos/. Then:

import "./kairos/styles.css";                 // tokens + webfonts, imported once
import { Button, Card, Stat, Badge } from "./kairos";

Options

| Flag | Description | | --- | --- | | -d, --dir <path> | Target directory (default src/kairos) | | -f, --force | Overwrite the target directory if it already exists | | -h, --help | Show help |

What you get

• 69 React components (.jsx), re-exported from index.js:
  • core — Button, Badge, Avatar, Card, Divider
  • forms — Input, Select, Checkbox, Switch
  • data — Stat, StatRow, DataTable, RecordCard, KpiCard, DeltaBadge, PercentileMeter, ScoreBadge
  • navigation — Tabs, SegmentedControl, Breadcrumb, UserMenu, AppHeader, AppTabBar, AppActionBar, SideNav
  • charts (dependency-free SVG/CSS) — Sparkline, LineChart, BarChart, Donut, Radar, Gauge, StackedBars, Waterfall, QuadrantScatter, ContributionBars, GapBars, HStackComposition, ChartLegend, and an Indonesia Choropleth
  • brand — Logo
• TypeScript types — index.d.ts at the root plus co-located .d.ts for the core set, so the barrel import is fully typed.
• Design tokens — colors, typography, spacing/radii/shadows/motion (tokens/*.css).
• Webfonts — Plus Jakarta Sans + JetBrains Mono, wired up by styles.css.

The copy is plain .jsx — edit any component like your own code. Charts and figures use Indonesian number formatting by default.

MCP server (for AI assistants)

Kairos UI bundles a Model Context Protocol server so an AI coding assistant (Claude Code, Cursor, …) can discover components, read their props, and paste usage — no extra install. Add this to your editor's MCP config:

{
  "mcpServers": {
    "kairos-ui": {
      "command": "npx",
      "args": ["-y", "@theojustin/kairos-ui@latest", "mcp"]
    }
  }
}

Tools: list_components, search_components, get_component_props, get_component_usage. To sanity-check it, ask your assistant to "list the Kairos UI components" — it should return all 40.

Requirements

react and react-dom (peer dependencies you already have in a React app).