Shared tokens, native components, and platform differences documented instead of hidden — for teams whose web and native apps drift apart the moment they are maintained separately.
5 implementations: React, SwiftUI, Jetpack Compose and Flutter, with Angular in preview.
npx @kinetixui/cli add buttonExample — adds one component. Installation covers the full library.
Source: tokens/
color.action
→ color.primary → color.azure.700 → #1d4ed8
Tokens generated · components written per platform
React
npm · @kinetixui/ui
--action: var(--primary);"data-[state=checked]:bg-action data-[state=unchecked]:bg-tertiary",There are two ways to keep one design consistent across platforms. One runtime can draw every screen, and each platform’s own behaviour becomes something to imitate. Or a contract is shared and each platform implements it in its own idiom — which means differences exist, and have to be written down. KinetixUI takes the second trade, and writes them down.
One DTCG source, compiled by Style Dictionary. Change a value once — it moves everywhere, in every language.
Two different things, deliberately. Tokens are generated — one DTCG source becomes CSS variables and TypeScript for the web, plus Swift, Kotlin and Dart constants. Components are hand-built: React, SwiftUI, Jetpack Compose and Flutter, with Angular in preview each implement the same component contract natively, never web code wrapped or converted into a native app.
Components install through the kinetixui CLI and land in your repo, with the npm packages they import. No runtime dependency you cannot patch, no lock-in — the code is yours to change.
One semantic contract, two value sets, toggled with a class. Contrast is audited against WCAG AA in CI.
One DTCG token source generates every platform’s native token output. React, SwiftUI, Jetpack Compose and Flutter, with Angular in preview each implement the same component contract natively — hand-written per platform, never one source converted into five. And every platform claim is checked against real source in CI, so the coverage you read is the coverage that exists.
01 · canonical source
tokens/
tokens/
DTCG JSON, one file per theme
02 · build
Style Dictionary
style-dictionary/
03 · generated
04 · written per platform
KinetixUI does not convert one component implementation into five. The token is shared; the Switch beside this is written once per platform, in that platform’s own language — and every copy reads the same action colour.
React and Angular (preview) install from a package registry today. SwiftUI, Jetpack Compose and Flutter are real implementations, compiled in their own CI, that you build from source — not yet distributed as packages. What ships where.
packages/ui/src/components/switch.tsxlines 23–29
className={cn( "peer inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent", "transition-[background-color,box-shadow] duration-instant ease-standard", "data-[state=checked]:bg-action data-[state=unchecked]:bg-tertiary", "[@media(hover:hover)]:enabled:hover:[box-shadow:0_0_0_5px_hsl(var(--foreground)/0.08)]", // Pressed is written twice: bare for touch, and again inside the hover media query, because Tailwind // emits media-wrapped utilities after plain ones and the hover layer would otherwise outrank the press.Marked lines read the action token.Switch on every platform
A composed interface — Card, Badge, Switch and Button — rendered live with the React implementation.
Compiled copies of this recipe
One choice from a few, with the selection carried by shape as well as colour.
Verification by platform
A value on a track, keyboard-adjustable on every platform that implements it.
Verification by platform
The browser's own select, on the web only. Native platforms compose Select instead, and the manifest says so.
Verification by platform
A platform badge costs nothing to add. Ours has to compile.
Every design system claims to be cross-platform, and almost none publishes where it falls short. That is why coverage tables drift into aspiration — and why you usually find out after migrating. KinetixUI derives its coverage from one manifest and fails the build when a claim outruns the source behind it.
React
Angularpreview
SwiftUI
Jetpack Compose
Flutter
direction-provider claiming three native platforms with no implementation on any of them — our own claim, caught by our own check.Most adoption cost lands before any benefit does. These are three independent entry points — take the first and stop, if that is all you need.
Level 01 — tokens
Install the token package and generate your platform’s native output. On Flutter the Material and Cupertino adapters style stock widgets, so nothing of ours has to appear in your tree. Your components stay exactly as they are.
Start with tokensLevel 02 — components
Bring in one component at a time. The CLI writes the source into your repository and resolves the npm packages those files import, so what lands is yours to edit — no runtime dependency you cannot patch.
Browse the catalogueLevel 03 — blocks
Composed interface patterns — settings panels, pricing tiers, forms — with real source on every platform that lists them. The step past primitives, for when the pattern rather than the button is what you are rebuilding.
See the blocksModels, framework-independent functions and accessible React primitives for device status, telemetry, battery, signal, firmware and alerts. A module on top of the token contract — not a sixth platform, and not part of the component catalogue.
Agencies and product teams shipping a consistent design across React, SwiftUI, Jetpack Compose and Flutter, with Angular in preview — one token contract, a native implementation per platform, with documented exceptions where a platform-native pattern serves better than a forced port. MIT licensed, all of it.