Chiralkit / UI Kit
One visual system. Every stack.
Tokens, primitives, and patterns expressed once, then implemented for React, Web Components, and server-rendered templates.
01 · What
No package to wire up and no theme to rebuild. The component lands in your repository as plain code you can read and change.
Run ck init once to detect your framework, then ck add button. The files are copied into your project, ready to commit.
The same ds-button tag works in React, Django templates and plain HTML, with the same props and events everywhere.
02 · Why
Switching design systems usually means rewriting components and renaming every color. ChiralUI starts from what you already have: ck tokens migrate reads your shadcn/ui globals.css and writes chiraltokens.css, with your colors, radius and fonts already mapped to ChiralUI tokens. No AI, no API key.
Read the shadcn migration guide03 · How
Every stack reads the same @chiralkit/tokens values, prop names and event names, so a migrated token means the same thing everywhere. When the registry moves on, ck update shows the diff before it touches your copy.
Each level is built from the two before it — the Chiralkit taxonomy applied to what the UI Kit ships. The rings follow Fibonacci: 0, 1, 1, 2, 3, 5. Tokens are the point everything starts from; at 2, chirality begins: a piece ships with its mirror, like two hands.
See the cross-domain framing in Chiral ArchitectureThe shared vocabulary — color, spacing, radius, typography — declared once in @chiralkit/tokens and consumed by every stack as CSS custom properties.
Single-purpose custom elements built directly from tokens: ds-button, ds-badge, ds-code-block. React and template usage both reach the same tag.
Compositions of primitives that solve recurring interactions — dialogs, forms, tabs — with the same prop and event contract across stacks.
Paired specializations of a pattern that share structural DNA and mirror per context. Two cards, two form modes, shipped together with the transition contract between them.
End-to-end user flows — sign-in, checkout, settings — assembled from patterns and enantiomers, portable across React and server templates.
Layouts and pages: the geometry that lays features out on a surface, and the full compositions a user actually sees. The top of the UI Kit's spiral.