Installation

Scaffold a new Cassa UI project with one command. Pick a preset that matches how much you need — the CLI installs dependencies and initialises git automatically.

Scaffold a new project

Run the CLI and follow the prompts — a project name, npm org scope, a preset, and which AI assistants to wire the MCP server for.

npx create-cassa-ui@latest
cd my-app
npm run dev

Pass flags to skip prompts entirely — useful for CI or scripting.

npx create-cassa-ui@latest my-app --scope @your-scope --preset standard --mcp claude,cursor

Presets

Choose a preset at scaffold time. Each one controls which packages are included and how apps/web is configured.

Preset	Packages	App
minimal	tokens, ui, utils, types	Component showcase — no dashboard, no auth
standard	+ ui-layout, hooks, notifications	Dashboard shell — metric cards, sidebar, no auth or charts
full	+ ui-forms, ui-overlay, ui-data, auth-ui, api-client	Complete dashboard — auth, overlays, charts, analytics, settings

What gets created

The example below shows a standard scaffold. The full preset adds the remaining packages and all dashboard pages.

my-app/
  AGENTS.md                ← conventions for AI coding tools
  component-manifest.json  ← generated index of every component
  .mcp.json / .cursor/     ← MCP config (only for assistants you picked)
  apps/
    web/          ← dashboard starter (Next.js, port 3000)
  packages/
    tokens/       ← design tokens (CSS vars + Tailwind v4 @theme)
    ui/           ← core components
    ui-layout/    ← layout primitives
    notifications/ ← toast system
    hooks/        ← utility hooks
    utils/        ← helper functions
    types/        ← shared TypeScript types
  scripts/
    build-manifest.mjs     ← regenerates the manifest

CLI options

Flag	Description
--scope <scope>	npm org scope, e.g. @acme
--preset minimal\|standard\|full	Project preset (default: standard)
--mcp <claude,cursor,codex\|all\|none>	wire the MCP server for these assistants (skips the prompt)
--skip-install	Skip npm install
--skip-git	Skip git init
-v, --version	Print version
-h, --help	Print help

Importing packages

All packages are workspace dependencies — import directly, no build step needed. The @cassa/ scope is replaced with your own scope automatically when you scaffold.

import { Button, Badge, Card } from '@cassa/ui';
import { Input, FormField } from '@cassa/ui-forms';
import { Stack, Grid } from '@cassa/ui-layout';
import { Table, LineChart } from '@cassa/ui-data';
import { LoginForm, AuthGuard } from '@cassa/auth-ui';
import { useToast } from '@cassa/notifications';
import { createApiClient } from '@cassa/api-client';
import { useDebounce, useLocalStorage } from '@cassa/hooks';
import { cn, formatCurrency } from '@cassa/utils';

Available scripts

Command	Description
npm run dev	Start all apps in watch mode (Turborepo)
npm run build	Build all apps and packages
npm run lint	Lint all workspaces
npm run check-types	TypeScript check all workspaces
npm run manifest	Regenerate component-manifest.json
npm run mcp	Wire the MCP server into your editor
npm run format	Format with Prettier

Next: Theming →