Installation

KinetixUI ships two ways. Use whichever fits — they're the same tokens.

The registry drops source into your repo (you edit it freely) via the kinetixui CLI. The npm packages update with npm update. Tokens are a good npm dependency; components are often nicer copied.

Tokens#

Registry — writes :root (light) + .dark + the shadow / type composites into your global stylesheet:

npx @kinetixui/cli init

npm — import the generated CSS, or the typed object:

@import "@kinetixui/tokens/css";
@import "@kinetixui/tokens/css/dark";
@import "@kinetixui/tokens/css/extras"; /* --shadow-* + --text-* */

import tokens from "@kinetixui/tokens";
tokens.color.blue[500]; // "#1b3c53"

Native text styles ship too: KinetixType.swift, KinetixType.kt, app_text.dart under the package's dist/{ios,android,flutter}.

A component#

Registry:

npx @kinetixui/cli add button

The CLI resolves tokens first (a registry dependency), installs every npm package the delivered files import — for button that is @radix-ui/react-slot, class-variance-authority, clsx and tailwind-merge — then drops button.tsx into your configured components directory.

clsx and tailwind-merge are there because button.tsx imports cn(), so the item also delivers lib/utils.ts, which imports both. You do not install them yourself: each item's dependencies are derived from every file it ships, and pnpm check:registry-deps fails the build if one is ever missing.

Name several at once (add button card dialog), run npx @kinetixui/cli list to see everything available, or pull the whole library in one go with npx @kinetixui/cli add --all. See the CLI reference for every flag.

npm — every component ships in the one package, so there's no per-component step:

npm i @kinetixui/ui

import { Button, Field, FieldLabel } from "@kinetixui/ui";

Tailwind#

Map the utilities onto the contract — KinetixUI ships a preset:

// tailwind.config.ts
import preset from "@kinetixui/ui/tailwind.config";
 
export default {
  presets: [preset],
  darkMode: ["class"],
  content: ["./src/**/*.{ts,tsx}"],
};

Dark mode#

KinetixUI's dark theme is a class toggle on <html>. See Dark Mode.