shadcn-svelte

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, or bunx --bun shadcn-svelte@latest — based on the project's package manager. Examples below use npx shadcn-svelte@latest but 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" then Dialog.Content, Dialog.Title, Card.Root, Card.Header, etc. — whatever the barrel exports (short names and/or Root as … aliases).

Single-component barrels (only one meaningful component in the folder): named imports — import { Button } from "$lib/components/ui/button" and <Button>, not import * as Button + Button.Root. Same pattern for { Input }, { Badge }, { Spinner }, { Checkbox }, { Separator }, { Skeleton }, etc.