Browse the docs
Getting started
Stardust design system
A design system for dashboards, built on shadcn/ui. One theme, two component sets: React (Next.js, Vite, any React app) and Vue.
Principles
Quick start
Add the registry to components.json, install the theme, then any component. Full steps are on the installation page.
npx shadcn@latest add @stardust/theme
npx shadcn@latest add @stardust/button @stardust/card @stardust/inputFoundations
ColorsSemantic color tokens. Components read tokens, never raw colors, so light and dark mode switch with one class.TypographyGeist with a five-step type scale. Each step sets size, line height, letter spacing and weight together.Spacing and layoutA 4px grid with ample space. Interactive controls share one 40px height so rows line up.Radius and elevationMedium-round corners from one --radius token, and tactile depth on primary surfaces.MotionFast, purposeful motion. Feedback in about 100ms, never decoration on things people use all day.IconsKeyline icons in the fill style. Duotone is reserved for badges.AccessibilityContrast, focus and semantics that hold in both themes.
Components
ButtonTriggers an action. Tactile primary, quieter secondary and outline, ghost for toolbars.BadgeA short status or category label. Tinted pill with a color border and a heavier bottom edge.InputSingle-line text entry, 40px tall, with label, hint and error states.SelectPick one option from a short list. The trigger matches the Input.Checkbox and switchCheckbox for choices that apply on submit, switch for settings that apply right away.CardGroups related content. 24px padding, hairline ring, optional inset image.DialogInterrupts the flow for a focused task or a confirmation.Dropdown menuA list of actions behind a trigger. 36px items with 2px gaps.ToastBrief, non-blocking feedback after an action. Built on Sonner (vue-sonner in Vue).ChatbotAn assistant that lives in a corner: an idle pill, a composer bar with a soft glow, and a conversation panel.TabsSwitch between views of the same subject.TableRows of comparable records. Numbers align right with tabular figures.All componentsLive gallery of every component.