Get started
A React design system built on shadcn/ui and Tailwind v4 — layout primitives, semantic tokens, and AGENTS.md rules for AI-driven UI work.
Reva is the design system that powers the Reva platform. It's an additive layer on top of shadcn/ui and Tailwind CSS v4, with structured primitives, semantic intent tokens, and AGENTS.md rules that keep AI-generated UI on-brand.
What's in the box
- Components — shadcn/ui primitives with cva variants, refactored to use Reva layout & typography
- Layout primitives —
Stack,Flex,Grid,Container(typed props over raw<div className="flex …">) - Typography primitives —
Text,Heading(polymorphic, withleading/weight/trackingprops) - Theme & tokens — semantic intent families (
destructive,constructive,warning,caution,info, …), OKLCH colour ramps, and font / radius scales — sourced from@reva/design-tokens - Icons — Phosphor only, no Lucide
- AGENTS.md & Cursor rules — enforced conventions so AI agents generate consistent, on-brand UI
Tech stack
| Layer | Technology |
|---|---|
| Monorepo | Turborepo |
| Package manager | Bun |
| Language | TypeScript (strict) |
| Components | shadcn/ui + Tailwind CSS v4 + cva |
| Design tokens | Style Dictionary v4 (W3C DTCG) → CSS · TS · Figma |
| Web framework | React 19, Next.js (docs) |
| Motion | Motion |
| Icons | Phosphor |
| Documentation | Fumadocs |
| Lint & format | Biome |
| Package builds | tsdown |
| Versioning | Changesets |
Use Reva in your app
Add @reva/ui to your app:
bun add @reva/uiThen wire Tailwind, the theme bundle, and fonts — see Building a consumer app for the three-step setup.
Run these docs locally
Every component, variant, and example you see here renders from apps/docs. Clone the monorepo and start the dev server:
git clone https://github.com/reva-platform/reva-apps
cd reva-apps
bun install
bun run dev:docsNo Tilt? No problem.
Under Tilt, docs runs at https://docs.revaos.local (served by Caddy). Standalone, cd apps/docs && bun run dev serves plain http://localhost:3000.