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.
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
71 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.
ExploreSee 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.
Dev Inspector Screenshot
Replace this placeholder with a real screenshot of the ShavinDevInspector overlay inspecting a component.
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.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.
71 AAA primitives, ready to ship.
Every component is fully tokenized, accessible, and ready to compose in Shavin Studio.
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/uiOn-spec generation, in your editor.
Watch how the AI agent prompt and background MCP validation work in tandem.
Connect your client
{
"mcpServers": {
"shavin-mcp": {
"command": "npx",
"args": ["-y", "@shavin/mcp"]
}
}
}16 Modular MCP Tools
Direct agent hooks for token introspection, real-time QA linting, code autofixing, and block synthesis.
Exposes raw tokens.json, 71 WCAG AAA primitives, and visual block schemas directly to AI agents.
get_tokensFoundation, semantic, radius & shadow token scalesget_componentsSpecs for 71 primitive components & CVA variantsget_builder_schemaBlock schemas (AppFrame, Sidebar) for visual canvasget_block_templateProduction TSX block templates from registryget_project_contextLive design system manifest for prompt injectionAgent Constitution & Domain Skills
Pre-packaged cognitive skills stored in .agents/skills/ to prevent AI UI slop and enforce mathematical spatial harmony.
shavin-appSaaS & DashboardsSaaS web applications, analytics dashboards, AI chat consoles, data tables, and forms.
shavin-webpageMarketing & LandingLanding pages, bento showcases, hero sections, and marketing experiences.
visual-compositorConcentric GeometryConcentric radius math (R_inner = max(0, R_outer - P)), spatial rhythm, and density laws.
shavin-ui-qa-linterAutomated Design QAAutomated design QA, token linting, accessibility audits, and verification pipelines.
shavin-ui-builderUI Block SandboxIsolated UI sandbox workflows for block composition and iterative user approval.
Teach your AI agent to think in design tokens.
Five specialized cognitive skills and a persistent project brain file that keep AI assistants aligned to your design system across every conversation — no re-prompting, no context drift, no UI slop.
SHAVIN.md Project Brain
Persistent AI Context
Auto-created by npx @shavin/cli init, SHAVIN.md gives your AI assistant long-term project memory — framework, token configuration, agent rules, and design constraints. Every MCP conversation reads it automatically.
# SHAVIN.md — auto-created by npx @shavin/cli init
## Project Context
- Framework: Next.js 15 App Router
- Tokens: @shavin/ui two-tier (foundation → semantic)
- Accent: Monochrome · Radius: medium · Gray: Zinc
## AI Agent Rules
- Never use raw hex colors — reference semantic tokens
- Respect concentric radius: R_inner = max(0, R_outer - P)
- Use CVA variants, never override className tokens.shavin/ — A scaffolded metadata folder with config.json, prompt templates, and context history that the MCP server reads on every interaction.
5 Cognitive Skills
shavin-appSaaS & DashboardsSaaS web applications, analytics dashboards, AI chat consoles, data tables, and forms.
shavin-webpageMarketing & LandingLanding pages, bento showcases, hero sections, and marketing experiences.
visual-compositorConcentric GeometryRadius math (R_inner = max(0, R_outer − P)), spatial rhythm, and density laws.
shavin-ui-qa-linterAutomated Design QAToken linting, accessibility audits, and verification pipelines.
shavin-ui-builderUI Block SandboxIsolated block composition and iterative user approval workflows.
npx @shavin/skillsorMCP install_skills toolEverything 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.
Six packages. One design contract.
A monorepo 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/ui71 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/skills5 cognitive AI skills shipped on npm. Teach agents token rules, radius math, and spatial harmony.
@shavin/mcp19 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.
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.”
The stack underneath
Production-ready on the tools your team already runs — no bespoke runtime, no lock-in.
Questions, answered
Everything about the system, theme customization, and AI integration.
Ready when you are
Discover the full design system.
Browse 71 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