—kit

Getting started

—kit is a shadcn registry. Components install as source into your project, with zero runtime dependencies beyond React. Requires Tailwind v4.

# Install

Every component pulls in the tokens. To start with the tokens alone:

shell
npx shadcn@latest add https://kit.ulasalyesil.com/r/hud.json

Then import them in your global CSS, after Tailwind:

css
@import "tailwindcss";
@import "../styles/hud.css";

Or take the three v1 components at once:

shell
npx shadcn@latest add https://kit.ulasalyesil.com/r/kit.json

# The truth rule

Every readout is bound to real data. If you do not pass a value, its readout does not render: no placeholders, no example numbers. Token counts appear only when your server sends usage. Durations appear only when a start time is known.

Values that change every frame (mic level, live elapsed time) never go through React state. They are written to CSS variables or text nodes from one shared animation frame loop.

# Theming

All colour, type and motion lives in --hud-* custom properties. Dark mode follows prefers-color-scheme, a .dark class, or data-hud-theme="dark" on any element.

css
/* Theme by overriding --hud-* anywhere: :root, a wrapper, one preview. */
.brand {
  --hud-accent: #0057ff;
  --hud-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

# Class names

The kit ships a five-line cx instead of clsx and tailwind-merge, to stay dependency free. It does not resolve Tailwind conflicts: your className is appended last and wins only by order.

# Next