shadcn-svelte
Installation
SKILL.md
shadcn-svelte
A framework for building UI, components, and design systems for Svelte. Components are added as source to the user's project via the CLI.
IMPORTANT: Run all CLI commands using the project's package runner:
npx shadcn-svelte@latest,pnpm dlx shadcn-svelte@latest, orbunx --bun shadcn-svelte@latest— based on the project's package manager. Examples below usenpx shadcn-svelte@latestbut substitute the correct runner for the project.
Current Project Context
Read components.json at the project root and, when you need the live file layout, list the directory given by the aliases.ui path (resolved with the same rules as the CLI).
Imports (Svelte)
Each component lives in its own folder with an index.ts barrel. Match the installation docs:
- Multi-part components (dialog, select, card, field, tabs, …):
import * as Dialog from "$lib/components/ui/dialog"thenDialog.Content,Dialog.Title,Card.Root,Card.Header, etc. — whatever the barrel exports (short names and/orRoot as …aliases). - Single-component barrels (only one meaningful component in the folder): named imports —
import { Button } from "$lib/components/ui/button"and<Button>, notimport * as Button+Button.Root. Same pattern for{ Input },{ Badge },{ Spinner },{ Checkbox },{ Separator },{ Skeleton }, etc.