Browse the docs

Getting started

Installation

Stardust installs through the shadcn CLI (shadcn-vue for Vue). Components are copied into your project as source.

1. Set up shadcn

npx shadcn@latest init

2. Add the Stardust registry

In components.json, point @stardust at your deployment. Vue uses the /vue/r path.

{
  "registries": {
    "@stardust": "https://<your-host>/r/{name}.json"
  }
}

3. Install the theme, then components

npx shadcn@latest add @stardust/theme
npx shadcn@latest add @stardust/button @stardust/badge @stardust/card
npx shadcn@latest add @stardust/all   # everything
  1. 1Install @stardust/theme on its own first. When it arrives as a dependency, the CLI only adds missing variables and keeps your existing colors.
  2. 2Load the Geist font (next/font/google in Next.js, or a font link). The type scale falls back to the system font.
  3. 3Mount <Toaster /> once in your root layout if you use toasts.

4. Vue only: icons

Vue components import Keyline icons through unplugin-icons, which bundles them at build time. The registry installs the packages; add the plugin yourself.

// vite.config.ts
import Icons from "unplugin-icons/vite"

export default defineConfig({
  plugins: [vue(), Icons({ compiler: "vue3" })],
})

// tsconfig: "types": ["unplugin-icons/types/vue"]