Installation

Two ways to get these components, pick whichever fits — the npm package for the fastest setup, or copy the source if you want to own and customize it yourself.

Option 1: npm package

Precompiled CSS ships with the package — no Tailwind config, no token setup, nothing else below on this page applies.

npm install iza-ui

import "iza-ui/styles.css"; // once, anywhere in your app
import { Dock, WindowCard, AmbientCanvas } from "iza-ui";

Option 2: copy the source

Copy the component file you want from src/components/ (each component page's Code tab has the exact source) 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. Window Card and Dock Item also need the --glass-* variables below and the glassCard string from src/lib/tokens.ts; Ambient Canvas needs neither.

@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;
}