Cassa UI
Available on npm · MCP-ready · MIT

Build with Cassa UI, wired for your AI assistant

Scaffold a React monorepo — tokens, components, forms, auth, charts — with the AI context (AGENTS.md, a component manifest, an MCP server) built in.

npx create-cassa-ui@latest my-app
Get started →Live Demo →
Built withReact 19TypeScriptNext.jsTailwind CSSTurborepoTanStack QueryZodMCP

Built for AI-assisted development

Every scaffold ships the context your assistant needs to use these components — no hallucinated imports, props, or variants.

AGENTS.md

The conventions your editor reads on open — token classes only, dark mode is automatic, ‘use client’ boundaries, the trigger-is-a-button rule.

component-manifest.json

Every export’s exact import path, prop types, CVA variants, and a working example — generated from the types, regenerated on install. The AI stops inventing props.

MCP server

list_components · get_component · get_tokens · conventions — live tools in Cursor / Claude Code. Opt in at scaffold time or with npm run mcp.

check_usage

The AI lints its own snippet against the conventions — nested buttons, non-token colours, missing ‘use client’ — before the code lands.

How the AI layer works →

Designed for product teams

Five principles behind every design decision.

Token-driven

Every color, spacing, and radius comes from @cassa/tokens. Change a token and it propagates to every component, light mode, and dark mode instantly.

Type-safe by default

Column keys check against your data shape. Form names check against your Zod schema. TypeScript catches mismatches before they reach users.

No lock-in

Auth components accept any onSubmit handler. Wire them to next-auth, Clerk, a custom JWT, or your own backend — the UI stays yours.

Monorepo-ready

Every package is a separate workspace with its own dependency graph. Consume only what you need — and edit any package in place, no publish step.

Built on web standards

Overlays use the native dialog element and the Popover API; tabs and menus follow WAI-ARIA. Accessible and lightweight — no Radix, one small positioning dependency.

Five-layer architecture

Imports flow down. Packages never import from apps. Teams stay independent.

Foundation
@cassa/tokens@cassa/typescript-config@cassa/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/webapps/docs

11 packages, one monorepo

Each package is modular, typed, and directly importable.

@cassa/tokensFoundation

CSS variables, JS exports, and a Tailwind v4 @theme compiled from a single source of truth.

@cassa/uiUI

Button, Badge, Card, Heading, Text, Separator — token-driven primitives.

@cassa/ui-formsUI

Input, Textarea, Select, Checkbox, Switch, FormField — React Hook Form + Zod.

@cassa/ui-layoutUI

Stack, Grid, Container, Sidebar — structural layout primitives.

@cassa/ui-overlayUI

Dialog, Drawer, Popover, DropdownMenu, Tooltip, Tabs — built on the native dialog element and the Popover API.

@cassa/ui-dataUI

Sortable Table with search and pagination. LineChart and BarChart with token colors.

@cassa/auth-uiFeature

LoginForm, SignupForm, ForgotPasswordForm, AuthGuard — bring your own auth logic.

@cassa/notificationsFeature

Toast system — 4 variants, auto-dismiss, persistent mode, queue management.

@cassa/api-clientCore

Typed fetch wrapper with TanStack Query, token injection, and structured error handling.

@cassa/hooksCore

useDebounce, useLocalStorage, useMediaQuery, useControllableState, and more.

@cassa/utilsCore

cn(), formatCurrency(), formatDate(), truncate(), slugify() and other helpers.

Ready to start building?

Scaffold a new project in seconds. Everything configured and ready to go.

npx create-cassa-ui@latest my-app
Read the docsBrowse components