Installation

There's no package to install. Copy the component file you want from src/components/ui/ into your own project, and make sure the two things below already exist.

1. Tailwind CSS v4

Every component is styled with Tailwind utility classes only — no CSS modules, no styled-components. You need Tailwind v4's CSS-first config (@import "tailwindcss" in your global stylesheet).

2. Design tokens

Components reference color tokens like bg-primary and text-on-surface, not raw hex values. Add these to your own @theme block — see the full table on the Theming page.

globals.css
@theme {
  --color-primary: #3B82F6;
  --color-secondary: #9CA3AF;
  --color-tertiary: #3F3F46;
  --color-neutral: #DCE0E8;
  --color-surface: #1C1C21;
  --color-on-surface: #F5F5F7;
  --color-error: #EF4444;
  --color-primary-contrast: #FFFFFF;
  --color-border-subtle: #33333A;
}

3. Glass surfaces (optional)

Window Card and Dock Item use a shared frosted-glass recipe that also swaps under light/dark — copy glassCard from src/lib/tokens.ts and the --glass-* variables from globals.cssif you want that component. Button, Input, Textarea, and Logo Mark don't need it.

web design.