Color & theming
Semantic roles resolve independently in light and dark without changing component markup.
Background
Foreground
Muted
Action
Maintained by VegaStack team
VegaStack Design System
A production UI foundation for VegaStack: shared tokens, accessible components, reusable patterns, and implementation guidance for humans and AI agents.
Tailwind v4Base UIReact 19
116Production components
467Animated icon items
11 · 1Hooks · starter block
WCAG 2.2AA accessibility target
One system contract
The same design decision should survive every interface.
Tokens establish the rule. Components own the behavior. Patterns prove the result. Documentation and agent skills keep that contract intact from design intent to production source.
01 / System trace
Follow one decision from token to product.
Select a component and inspect the same decision across semantic foundations, owned behavior, and a recognizable product pattern.
Trace a real component
Select a component to update its semantic foundation, owned behavior, and product pattern together.
A semantic action moves from token roles into component state and a release workflow.
01 / Foundation
Semantic roles
--primaryaction ink--primary-foregroundon-action text--radius-md8px--duration-fast150msLight and dark resolve independently while the semantic name stays stable.
02 / Component
Owned behavior
Variants, state, keyboard semantics, and responsive behavior stay in one owned source.
03 / Pattern
Product context
Release v0.2
All required checks are complete.
The composition remains recognizable because it inherits the same contract rather than restyling locally.
Canonical source and docs stay paired.
Behavior and accessibility are contract fields.
Open Button documentation02 / Foundations
The rules are visible, not implied.
Every foundation resolves to a token or documented behavior. Theme the values once; component markup remains stable.
Read the principlesTypography & icons
Size establishes hierarchy; mono carries metadata; one icon grammar handles function and motion.
Product hierarchy
Clear at every density
Body copy stays readable while labels and metadata remain compact.
--text-h3 · --icon-default
Space, shape & elevation
A 4px spacing foundation, restrained radii, and two named shadows keep surfaces coherent.
Motion & interaction
Quiet motion, visible focus, predictable empty states, and documented interaction patterns.
Fast response
--duration-fast · 150ms
Standard movement
--duration-base · 200ms
Emphasized change
--duration-slow · 300ms
03 / Component catalog
116 components, organized by responsibility.
Browse the complete production catalog by responsibility. Every title links to its documentation and stays synchronized with the verified component contract.
Core controls
24 components
Actions, selection, status, loading, identity, and compact utility controls.
Forms & editing
23 components
Structured fields, validation, rich editing, dates, countries, and autosave.
Navigation & layout
14 components
Page structure, responsive shells, navigation, sidebars, and content framing.
Overlays
14 components
Focused tasks, contextual actions, menus, commands, and progressive disclosure.
Data display
12 components
Structured records, filtering, charts, tables, properties, and responsive lists.
Content & marketing
23 components
Public-facing composition, type, code, pricing, announcements, and brand motion.
AI & chat
6 components
Messages, bubbles, attachments, tool activity, and anchored conversation scrolling.
04 / Get started
Start with the system. Bring your agent.
Choose the path you need. Every command is copied independently, and every access boundary is stated before you run it.
Install the foundation
Add the runtime, preset, icons, and CLI. Design tokens arrive as a dependency—one package is the supported quickstart.
Runtime
pnpm add @vegastack/design
Teach your agent the system
Install the packaged skill bundle for component choice, tokens, composition, audits, and registry consumption. No GitHub repository access is required.
Agent skill
npx vegastack-design skills install
Copy in production source
Add the provider first, then the components your product needs. This path requires configured registry credentials.
Authenticated registry
pnpm dlx shadcn@latest add @vegastack/provider
05 / Evidence
A release is a chain of evidence.
The system does not treat a styled file as a finished component. Source, behavior, documentation, distribution, and visual review must agree.
Canonical source
One owned implementation drives the docs copy and registry payload.
Behavior & accessibility
Browser tests cover semantics, keyboard behavior, focus, and axe assertions.
Documentation
Live previews, variants, API, accessibility, and usage guidance stay reviewable in MDX.
Distribution
Whole-item hashes, a signed manifest, and fail-closed verification protect copy-in source.
Visual release gate
Light, dark, desktop, and mobile lanes are required before deployment.
116 / 116
Component contracts reconciled
597
Registry items in the verified inventory
SHA-256
Whole-item integrity with signed manifest
Ready to build
Build with the VegaStack Design System.
Install the foundation, follow the implementation guide, and start composing production-ready interfaces.
Read the quickstart