Introduction

VegaStack Design is the internal design system: design tokens (public npm), 196 components (private shadcn registry, copy-in), a live Fumadocs showcase, and agent-ready metadata.

ArchitectureCopy Anchor Link

The system is shadcn base-nova, used as-is: every component shadcn ships is upstream's own file plus a small, recorded patch, so its props, its variants and its behaviour are upstream's. What VegaStack adds on top is a recorded set of exceptions — one focus outline with no glow, a hand cursor, an accessibility set, four status families, our chart and tag palettes, and our own motion utilities — plus the components shadcn does not ship.

• Tokens — @vegastack/design-tokens ships theme.css (OKLCH :root + .dark + @theme inline) and a typed { light, dark } model. One-file override: redefine --primary and every component repaints.
• Components — Base UI under CVA variants, cn() from @vegastack/design, and data-* state hooks. Configure the private registry first, then install with shadcn add @vegastack/<name> (copy-in).
• Blocks — copy-once screens and sections (sidebars, logins, dashboards, chart families). You own a block the moment you pull it; nothing re-pulls it.
• Showcase — this site. Every component page renders the real shipped source via a live preview.

FoundationsCopy Anchor Link

Start with Colors and Typography, then Icons and Motion.

ComponentsCopy Anchor Link

Browse the 190-component library, grouped by role — Buttons & Actions, Inputs & Controls, Overlays, Menus & Commands, Navigation, Layout & Structure, Data Display, Feedback & Status, Content & Typography, and Chat & Communication. Start with Button.

UtilitiesCopy Anchor Link

CSS-only helpers that ship with @vegastack/design-tokens — Shimmer and Scroll Fade.

InstallCopy Anchor Link

Start with Install From VegaStack Registry before copying component commands.