Installation

Set up a project, wire the Tailwind preset, import the tokens, and render your first component. Or copy the source straight from the docs.

Requirements. React 18+ and Tailwind CSS v4 for the React edition, Node 20.19+ for the CLI. Components are written into your repo as plain files; you own them after add.

1. Initialize your project

init writes the design tokens and the Tailwind preset into your project as two CSS files you own: letrix-tokens.css (the --lx-* scales and semantic tokens) and letrix-preset.css (maps every Tailwind utility to those tokens and sets up scoped dark mode).

Terminal
npx letrixui init

It also writes components.json, which records where components, recipes, lib and styles live in your project — src/ is detected automatically. Change the paths there and every later add follows them, imports included.

2. Wire up your stylesheet

Import the two files after Tailwind and the React Aria Components plugin. Order matters: the preset maps colors, radius, shadows and type onto the tokens, and your own Tailwind classes keep working alongside it.

app/globals.css
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";

@import "./styles/letrix-tokens.css";
@import "./styles/letrix-preset.css";

3. Add your first component

add fetches a component from the registry, resolves its registry dependencies, and writes the files where your components.json says. By default that is components/letrix/button.tsx, its recipe in components/letrix/recipes/button.ts, and the shared lib/cn.ts utility.

Terminal
npx letrixui add button

The CLI prints the npm dependencies the added components need. For the full kit they are:

Terminal
npm install react-aria-components class-variance-authority tailwind-merge clsx

4. Use a component

src/app/page.tsx
import { Button } from "@/components/letrix/button";

export default function Page() {
  return <Button variant="primary">Save changes</Button>;
}

TypeScript definitions are included. Dark mode is one class: add class="dark" to your <html> element and every component follows.

Paid components

npx letrixui list shows every registry item and its tier. Paid components need authorization, once per machine:

Terminal
npx letrixui login

That opens this site, you click one button, and the CLI stores an API key for that machine — nothing to copy, and you can revoke it on its own from your dashboard. Where no browser can open (CI, Docker, an MCP server), create a key in the dashboard and set LETRIXUI_API_KEY instead. Either way the registry validates server-side and never returns licensed source without it.

Icons package

Icons are published as a separate npm package (@letrixui/icons). They are tree-shakeable React SVG components, not registry items added via letrixui add.

Terminal
npm install @letrixui/icons

Prefer copy and paste?

The CLI is optional: every example's Code panel shows the complete React source, so you can copy a component straight from the docs into your project. What you copy is exactly what renders in the preview.

Next