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 with independently versioned npm packages. Each package handles one concern and can be consumed on its own. Everything is typed, token-driven, and ships no runtime configuration.
Package overview
| Package | Description |
|---|---|
| @cassa/tokens | Design tokens — CSS variables, JS, and Tailwind preset |
| @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-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-data
Feature @cassa/auth-ui, @cassa/notifications
Apps apps/docs, apps/web