Open-source React design system
A design system written for humans & machines.
Your AI assistant builds on-spec by construction — strict two-tier tokens, WCAG AAA primitives, concentric radius math, and a native MCP server keep every generated component accurate.
Every component references only semantic tokens. Themes remap semantics — your UI never touches raw palette values.
Enterprise Architecture
Start anywhere. Change anything. Ship faster.
A design system that adapts to your workflow, not the other way around. Built for speed, clarity, and creative freedom.
Themes that fit your brand
Fully customizable themes ready for use. Make it yours without starting from scratch.
ExploreTheme
Accent Color
Gray Family
Appearance
Radius
Heading Font
Body Font
73 primitives & blocks
Accessible and themeable React components with built-in spacing, dark mode, and flexible styling.
ExploreA design system that your agent can use
Scaffold projects, browse templates, generate themes, and get agent-ready docs. ThemeProvider auto-mounts the Dev Inspector in dev mode — zero config.
ExploreReady to ship templates
Production-ready templates for common pages, just plug in your content.
ExploreShavin Studio
Assemble full screens, without writing layout code.
Shavin Studio is a visual canvas for composing production interfaces from @shavin/ui primitives. Every block you drop already obeys the token engine, concentric radius math, and accessibility contract — so what you arrange is what ships.
01Compose visually
Drag token-compliant blocks onto a live canvas — heroes, pricing tables, dashboards, and form layouts.
02Export clean JSX
Hand off 100% token-compliant @shavin/ui JSX straight into your repository.
Shavin Dev Inspector
See your design system live in your dev server.
A zero-config inspector overlay that auto-mounts the moment you wrap your app in ThemeProvider. No browser extension, no setup, no extra dependency — just open your dev server and inspect.
01Component Inspector
Hover any element on the page to see its primitive name, CVA variants, and prop breakdown in real time.
02Token Inspector
Inspect the resolved semantic token values driving each component — accent, radius, surface, and spacing scales.
03AI Context
Copy a ready-to-paste component spec for your AI assistant — token assignments, variant matrix, and accessibility metadata.
<ThemeProvider
devTools={process.env.NODE_ENV !== "production"}
>
<App />
</ThemeProvider>
// Inspector auto-mounts in dev mode.
// Set devTools={true} to force-show in production.Primitive Ecosystem
73 AAA primitives, ready to ship.
Every component is fully tokenized, accessible, and ready to compose in Shavin Studio.
Typography
Typography
Typography
Typography
Heading
Heading
Heading
Heading
73 primitives, composed into real interfaces.
Accessible, themeable, and WCAG AAA compliant React primitives that seamlessly assemble into rich dashboards, forms, and product surfaces.
Actions & Navigation
Buttons, Tabs, and Keybinds
Identity & Status
Avatars, Badges, and Presence
Controls & Inputs
Text fields, Sliders, Switches
Feedback & Banners
Callouts, Alerts, and Toasts
Concentric Radius Math
Typography & Tokens
Scale hierarchy & semantics
Heading Display 3xl
Calibrated type scales with natural color inheritance.
text-accent-contrast·tabular-numsHow it works
Four steps, one workflow.
Setup — one command
Scaffold the whole system into any React or Next.js app. The CLI installs the package, registers the Tailwind preset, and wires the global styles.
# Recommended — full scaffold
npx @shavin/cli init
# Or just the package
npm install @shavin/uiMCP Server Integration
On-spec generation, in your editor.
Watch how the AI agent prompt and background MCP validation work in tandem.
Connect your client
{
"mcpServers": {
"shavin": {
"command": "npx",
"args": ["-y", "@shavin/mcp"]
}
}
}29 Modular MCP Tools
Direct agent hooks for token introspection, real-time QA linting, code autofixing, and block synthesis.
Exposes raw tokens.json and 71 WCAG AAA primitive specs directly to AI agents.
get_tokensFoundation, semantic, radius & shadow token scalesget_componentsSpecs for 71 primitive components & CVA variantsget_project_contextLive design system manifest for prompt injectionTeach your AI agent to think in design tokens.
A persistent project brain file that keeps AI assistants aligned to your design system across every conversation — no re-prompting, no context drift, no UI slop.
# SHAVIN.md — auto-created by npx @shavin/cli init
## Project Context
- Framework: Next.js 15 App Router (React 19)
- Tokens: @shavin/ui two-tier (foundation → semantic)
- Accent: Grass · Radius: Large · Scaling: 95%
- Density: Compact · Panel: Translucent
## AI Agent Invariants
- Never use raw hex/rgb() colors — use semantic tokens only
- Respect concentric radius: R_inner = max(0, R_outer - P)
- Container surfaces use rounded-[var(--radius-panel)]
- Controls/buttons use rounded-[var(--radius-lg)]
- Floating surfaces MUST include data-panel attribute01Persistent Project Memory
SHAVIN.md grounds your agent in your exact tokens, radii, and framework — eliminating re-prompting and context drift.
02Strict Token Invariants
Guides your AI assistant to generate role-based semantic tokens and concentric radius math by construction.
03Automatic MCP Injection
Read automatically upon session start in Antigravity, Cursor, and Windsurf via the native Model Context Protocol.
9 specialized skills that prevent AI slop.
Pre-packaged cognitive intelligence stored in .agents/skills/ and loaded on demand by AI assistants to enforce mathematical spatial harmony and token purity.
shavin-appSaaS & Dashboards
SaaS web applications, analytics dashboards, AI chat consoles, data tables, and high-density forms.
shavin-webpageMarketing & Landing
12-section reading arcs, bento showcases, hero sections, and conversion-driven marketing experiences.
visual-compositorConcentric Geometry
Mathematical concentric radius formulas (R_inner = max(0, R_outer − P)), measure limits, and spacing rhythm.
shavin-ui-qa-linterAutomated Design QA
Token linting, WCAG 2.1 AAA contrast validation, and real-time DOM bridge audit (:7428) verification.
shavin-ui-builderUI Block Sandbox
Isolated block composition, live AST JSX parser synchronization, and Studio canvas approval workflows.
npx @shavin/skills|orMCP install_skills toolCore capabilities
Everything you need to build without slop
Six tightly-integrated systems that keep human engineers and AI assistants aligned to the same design contract.
Strict Two-Tier Token Engine
Foundation palettes map cleanly to role-based semantic variables. Theme switching, dark mode, and runtime branding mutations work instantly — no component source changes required.
Concentric Radius Geometry
Outer container radii and inner control paddings satisfy R_inner = max(0, R_outer − P). Eliminates corner-clashing and distorted visual gaps across every nested surface.
WCAG 2.1 AAA Accessibility
Radix-backed focus trapping, keyboard navigation, roving tabindex, and screen-reader ARIA pairings for complex popovers, dropdowns, and modal dialogs — out of the box.
Visual Block Builder
Compose full-screen application layouts visually in the browser. Drag, drop, and export 100% token-compliant JSX directly into your repository.
Class Variance Authority Primitives
Unified variant management across size, intent, tone, and visual mode. Merged cleanly via cn() — clsx + tailwind-merge — for predictable prop overrides.
Zero-Hallucination MCP Server
Exposes tokens.json, components.json, and a JSX linter directly to Cursor, Claude, Antigravity, and Copilot — so generated code is accurate by construction.
The Ecosystem
Six packages. One design contract.
A collection of independently publishable packages — each solving a specific layer of the design-to-AI pipeline. Use them together or adopt the pieces you need.
@shavin/ui73 WCAG AAA primitives, ThemeProvider, and the auto-mounted Dev Inspector.
@shavin/block-schemaBlock schema definitions for composable page sections — the typed contract between Studio and your codebase.
@shavin/builder-engineThe visual layout engine that powers Shavin Studio — drag, compose, and export token-compliant JSX.
@shavin/skills9 cognitive AI skills shipped on npm. Teach agents token rules, radius math, and spatial harmony.
@shavin/mcp29 MCP tools exposing tokens, components, validation, and synthesis to Cursor, Claude, and Copilot.
@shavin/cliOne-command scaffolding: init wires your project, check verifies token discipline and config compliance.
Early Adopters
Built for production, growing in the open.
An open-source design system built in the open. Early adopters and AI-native developers are already shipping with @shavin/ui.
“The MCP server feeds exact component signatures and token rules to Cursor — no more hallucinated class names or broken layouts. It's the first design system that speaks the AI's language natively.”
“Concentric radius math and strict two-tier tokens make runtime theme switching instant. We went from custom CSS patches to full token compliance without touching component source.”
“Radix-backed primitives pass every automated accessibility audit out of the box. WCAG AAA as a non-negotiable default is the right call — most libraries treat a11y as an afterthought.”
Built on
The stack underneath
Production-ready on the tools your team already runs — no bespoke runtime, no lock-in.
FAQ
Questions, answered
Everything about the system, theme customization, and AI integration.
Ready when you are
Discover the full design system.
Browse 73 primitives, compose production-ready blocks, and let your assistant build on-spec — pick a starting point and go.
React 19+ · Next.js 15 · MIT licensed