Introduction
Cassa UI is a production-ready design system monorepo for React applications. It gives teams a shared language for UI — from raw design tokens to ready-to-use auth and data components.
What is it?
A Turborepo monorepo of modular @cassa/* workspaces. Each package handles one concern and can be consumed on its own. There is no separate npm release — the CLI copies the source into your project and you own it from there. Everything is typed, token-driven, and ships no runtime configuration.
Wired for AI
Every scaffold ships an AGENTS.md (the conventions your editor reads automatically) and a generated component-manifest.json — every export's import path, prop types, variants, and an example — plus an optional MCP server that exposes it to Cursor / Claude Code as live tools. Your assistant knows the real API instead of guessing. Learn more.
Package overview
| Package | Description |
|---|---|
| @cassa/tokens | Design tokens — CSS variables, JS exports, and a Tailwind v4 @theme |
| @cassa/ui | Core primitives: Button, Badge, Card, Heading, Text |
| @cassa/ui-forms | Input, FormField — React Hook Form + Zod |
| @cassa/ui-layout | Stack, Grid, Container, Sidebar |
| @cassa/ui-overlay | Dialog, Drawer, Popover, DropdownMenu, Tooltip, Tabs |
| @cassa/ui-data | Table, LineChart, BarChart |
| @cassa/auth-ui | LoginForm, SignupForm, ForgotPasswordForm, AuthGuard |
| @cassa/notifications | Toast system — 4 variants, auto-dismiss, persistent |
| @cassa/hooks | useDebounce, useLocalStorage, useMediaQuery and more |
| @cassa/utils | cn(), formatDate(), truncate() and common helpers |
| @cassa/api-client | TanStack Query wrapper with typed request builders |
Architecture
Imports always flow downward. Packages never import from apps. The five-layer model:
Foundation @cassa/tokens, tsconfig, eslint-config
Core @cassa/utils, @cassa/hooks, @cassa/types, @cassa/api-client
UI @cassa/ui, @cassa/ui-forms, @cassa/ui-layout, @cassa/ui-overlay, @cassa/ui-data
Feature @cassa/auth-ui, @cassa/notifications
Apps apps/docs, apps/web