Introduction

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

Architecture

• 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 — authored on Base UI with CVA variants, cn() from @vegastack/design, and data-* state hooks. Configure the private registry first, then install with shadcn add @vegastack/<name> (copy-in).
• Showcase — this site. Every component page renders the real shipped source via a live preview.

Foundations

Start with Colors and Typography, then Icons and Motion.

Components

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

Utilities

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

Install

Start with Install From VegaStack Registry before copying component commands.