Infrastructure & Tooling Map

The Shavin UI Ecosystem

System Architecture Map

1. Core Design System (@shavin/ui)

The main npm package containing 56 primitives, global CSS tokens, Radix UI primitives, and Tailwind preset definitions.

2. Automated CLI Initializer

Run npx @shavin/ui init to automatically install dependencies, configure Tailwind presets, and set up project imports.

3. Model Context Protocol (MCP) Server

Empowers AI agents (Cursor, Claude, Gemini) to query real-time component manifest schemas and token rules without hallucinating.

4. Shavin Studio & Gallery

An interactive canvas studio featuring live token configuration, code generation, and full page section previews.

Ready to install? Move to the Getting Started Installation Guide .
Configure Theme
Theme
Accent Color
Custom
Gray Family
Appearance
Radius
Scaling
Panel Style
Heading Font
Body Font