# Stardust

> Stardust is a dashboard design system built on shadcn/ui, with matching React and Vue component sets that share one token file. Components are installed as source with the shadcn CLI from the @stardust registry.

Install with `npx shadcn@latest add @stardust/<name>` (React) or `npx shadcn-vue@latest add @stardust/<name>` (Vue) after adding the registry to components.json. Install `@stardust/theme` first.

## Getting started

- [Introduction](https://stardust.aswnss.com/docs): What Stardust is and how it is organized.
- [Installation](https://stardust.aswnss.com/docs/installation): Add Stardust to a React, Next.js or Vue project.
- [Theming](https://stardust.aswnss.com/docs/theming): How the tokens work and how to change them.
- [AI and LLMs](https://stardust.aswnss.com/docs/llms): llms.txt files for AI coding tools.

## Foundations

- [Colors](https://stardust.aswnss.com/docs/foundations/colors): Semantic color tokens. Components read tokens, never raw colors, so light and dark mode switch with one class.
- [Typography](https://stardust.aswnss.com/docs/foundations/typography): Geist with a five-step type scale. Each step sets size, line height, letter spacing and weight together.
- [Spacing and layout](https://stardust.aswnss.com/docs/foundations/spacing): A 4px grid with ample space. Interactive controls share one 40px height so rows line up.
- [Radius and elevation](https://stardust.aswnss.com/docs/foundations/radius-elevation): Medium-round corners from one --radius token, and tactile depth on primary surfaces.
- [Motion](https://stardust.aswnss.com/docs/foundations/motion): Fast, purposeful motion. Feedback in about 100ms, never decoration on things people use all day.
- [Icons](https://stardust.aswnss.com/docs/foundations/icons): Keyline icons in the fill style. Duotone is reserved for badges.
- [Accessibility](https://stardust.aswnss.com/docs/foundations/accessibility): Contrast, focus and semantics that hold in both themes.

## Components

- [Button](https://stardust.aswnss.com/docs/components/button): Triggers an action. Tactile primary, quieter secondary and outline, ghost for toolbars.
- [Badge](https://stardust.aswnss.com/docs/components/badge): A short status or category label. Tinted pill with a color border and a heavier bottom edge.
- [Input](https://stardust.aswnss.com/docs/components/input): Single-line text entry, 40px tall, with label, hint and error states.
- [Select](https://stardust.aswnss.com/docs/components/select): Pick one option from a short list. The trigger matches the Input.
- [Checkbox and switch](https://stardust.aswnss.com/docs/components/checkbox-switch): Checkbox for choices that apply on submit, switch for settings that apply right away.
- [Card](https://stardust.aswnss.com/docs/components/card): Groups related content. 24px padding, hairline ring, optional inset image.
- [Dialog](https://stardust.aswnss.com/docs/components/dialog): Interrupts the flow for a focused task or a confirmation.
- [Dropdown menu](https://stardust.aswnss.com/docs/components/dropdown-menu): A list of actions behind a trigger. 36px items with 2px gaps.
- [Toast](https://stardust.aswnss.com/docs/components/toast): Brief, non-blocking feedback after an action. Built on Sonner (vue-sonner in Vue).
- [Chatbot](https://stardust.aswnss.com/docs/components/chatbot): An assistant that lives in a corner: an idle pill, a composer bar with a soft glow, and a conversation panel.
- [Tabs](https://stardust.aswnss.com/docs/components/tabs): Switch between views of the same subject.
- [Table](https://stardust.aswnss.com/docs/components/table): Rows of comparable records. Numbers align right with tabular figures.
- [All components](https://stardust.aswnss.com/components): Live gallery of every component.

## Patterns

- [Forms](https://stardust.aswnss.com/docs/patterns/forms): Settings and sign-up forms with consistent field spacing and clear actions.
- [Cards](https://stardust.aswnss.com/docs/patterns/cards): Stat cards, feature cards and pricing cards on a 16px or 24px grid.
- [Dialogs](https://stardust.aswnss.com/docs/patterns/dialogs): When to use Dialog, AlertDialog and Sheet.

## Optional

- [Full documentation](https://stardust.aswnss.com/llms-full.txt): every rule, token and example in one file.