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. You will be asked for a project name, npm org scope, and a preset.

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

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	Bare welcome page — no dashboard, no auth
standard	+ ui-layout, hooks, utils, types, notifications	Dashboard shell — metric cards, sidebar, no auth or charts
full	All packages	Complete dashboard — auth, charts, analytics, users, settings

What gets created

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

my-app/
  apps/
    web/          ← dashboard starter (Next.js, port 3000)
  packages/
    tokens/       ← design tokens (CSS vars + Tailwind preset)
    ui/           ← core components
    ui-layout/    ← layout primitives
    notifications/ ← toast system
    hooks/        ← utility hooks
    utils/        ← helper functions
    types/        ← shared TypeScript types

CLI options

Flag	Description
--scope <scope>	npm org scope, e.g. @acme
--preset minimal\|standard\|full	Project preset (default: standard)
--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 format	Format with Prettier
npx turbo run build --filter=web	Build a single workspace

Next: Theming →