Skip to content
Kinetixui

Introduction

KinetixUI is a design system built to move. A single design source becomes living tokens and components that stay in sync across every platform it implements — the name comes from kinetics: change it once, and it propagates everywhere. Which platforms those are, and how complete each one is, is on Supported platforms.

What you can install, and what you compile. React and Angular (preview) install from a package registry today. SwiftUI, Jetpack Compose and Flutter are real implementations, compiled in CI, not yet distributed as packages. Being undistributed is a fact about a package registry, not about the implementation — each native port is compiled by its own CI on every change.

  • Tokens — DTCG token files, compiled by Style Dictionary v4 into CSS variables, a TypeScript object, SwiftUI, Jetpack Compose, and Flutter.
  • Components — React + class-variance-authority + Radix primitives, styled with Tailwind against the token contract.
  • Registry — a component registry of our own, so you npx @kinetixui/cli add a component and own the code outright.
  • This site — built entirely on @kinetixui/ui and @kinetixui/tokens, in the same light and dark themes it documents.

Nothing here is a runtime dependency you install and theme. You copy components into your app and they become yours — KinetixUI keeps them aligned with the design source.

Who it's for#

Product teams, agencies and companies shipping on more than one platform, who want one design language across all of them — with the differences between platforms documented rather than hidden. MIT licensed, all of it.

Evaluating rather than installing? Start with platform coverage for what exists where, then tokens for the architecture. The reference documentation below assumes you have decided.

How it flows#

Design tokens live as variables in the design source.

Six brand ramps, spacing, radius, and a Material-3 type scale are extracted verbatim into tokens/primitives.

Semantic tokens map to the KinetixUI contract.

tokens/semantic/color.light.json aliases primitives to --primary, --muted, --ring, and the rest. A generated color.dark.json mirrors it.

Style Dictionary compiles every platform.

pnpm build:tokens runs once per theme and writes packages/tokens/dist/{web,ios,android,flutter}.

Components consume the contract.

@kinetixui/ui never hard-codes a hex — every colour is bg-primary, text-muted-foreground, border-input.

Quickstart#

Initialise

npx @kinetixui/cli init

Writes kinetixui.json and pulls the token contract into your globals.css.

Add a component

npx @kinetixui/cli add button

The source lands in your repo under the path from kinetixui.json — no runtime package.

Use it

import { Button } from "@/components/ui/button";
 
export default function Page() {
  return <Button>Ship it</Button>;
}

Next#

Full setup is on Installation; the contract and retheming live in Theming. Or jump straight to Button.

Getting StartedInstallation