Search Kaotypr Design System

Search tokens, pages and quick actions

Components

Kaotypr UI

A private shadcn-compatible registry. Every component you'd reach for, refined to consume the canonical theme — plus custom primitives and full blocks the design system needs but shadcn doesn't ship.

Kaotypr UI registry — light mode
Visit ui.kaotypr.comBrowse the registry

What's in the registry

Refined shadcn
Every shadcn primitive, refactored to consume Kaotypr tokens. Same component API — variants and props are immutable — but the visuals match the canonical theme out of the box. No theme prop drilling, no manual className overrides.
Custom components
The pieces shadcn doesn't ship: copy-chip, code-tabs, command palette, brand wordmark, theme toggle, density toggle. Built once, consumed everywhere.
Blocks
Page-level compositions ready to drop in: hero sections, feature grids, pricing tables, dashboard shells, settings panels, empty states. Reskin via tokens, not props.

Install

Use the standard shadcn CLI pointed at the Kaotypr registry. Each component is an individual JSON endpoint at https://ui.kaotypr.com/r/{name}.json.

pnpm dlx shadcn@latest add https://ui.kaotypr.com/r/button.json
pnpm dlx shadcn@latest add https://ui.kaotypr.com/r/card.json
pnpm dlx shadcn@latest add https://ui.kaotypr.com/r/dialog.json
# …or any other component / block

The CLI drops the component source straight into your components/ui/ folder, exactly like installing from the official shadcn registry — except every file already references Kaotypr tokens (bg-card, rounded-button, --density-control-h, the full surface). No further wiring needed.

Prerequisites

  • The Kaotypr theme imported in your globals.css — see Resources.
  • Tailwind v4 configured (the CLI assumes it).
  • shadcn CLI initialised (pnpm dlx shadcn@latest init if it's a fresh project).

What you won't find here

This page is a pointer, not the documentation. The component API (every prop, every variant, every example) lives at ui.kaotypr.com so the source of truth and the install endpoint are the same place. What lives here: the tokens those components consume, the tier rules they follow, and the patterns that compose them.

  • Need to know which tokens a component reads? Check the component source after install — the tokens are visible right in the className.
  • Need to add a variant? Don't — the variant surface is locked. Compose with utility classes on the consumer side instead.
  • Need a component that doesn't exist yet? Contact the owner straight from ui.kaotypr.com .