Shadcn Svelte

shadcn-svelte — Component-Aware Svelte UI Assistant

Use the right shadcn-svelte components when building UI in SvelteKit projects. This skill detects your project setup, shows what's available, and gives you access to full component documentation.

Prerequisites

The project must be a SvelteKit app with shadcn-svelte initialized:

# Initialize shadcn-svelte in an existing SvelteKit project
npx shadcn-svelte@latest init

How to use

Step 1: Detect project setup

Run the detection script to verify this is a SvelteKit project with shadcn-svelte and see which components are already installed:

bash "${CLAUDE_SKILL_DIR}/scripts/detect.sh" .

This will:

• Confirm it's a SvelteKit project (checks for svelte.config.js/ts and @sveltejs/kit in package.json)
• Confirm shadcn-svelte is installed (checks for components.json, bits-ui, or shadcn-svelte in package.json)
• List all currently installed components in the project's UI directory
• Provide the documentation URL

If the script exits with code 1, the project either isn't SvelteKit or doesn't have shadcn-svelte — do not proceed with shadcn-svelte components in that case.

Step 2: Read the component documentation

The full component documentation for LLMs is available at:

https://www.shadcn-svelte.com/llms.txt

Fetch this URL to get a structured index of all available components organized by category, with links to individual component documentation pages (in .md format).

When you need to use a specific component, read its individual documentation page from the links provided in llms.txt. Each component doc includes:

• Import statements and usage examples
• Available props, events, and slots
• Variants and configuration options
• Accessibility information

Step 3: Use the right component for the job

When building UI, follow this decision process:

1. Run detection to confirm shadcn-svelte is available and see installed components
2. Fetch llms.txt to see all available components
3. Read the specific component docs for the components you plan to use
4. Check if the component is installed — if not, add it:

   npx shadcn-svelte@latest add <component-name>
   

5. Import and use the component following the documentation patterns

Component categories

shadcn-svelte components are organized into these categories:

Adding new components

# Add a single component
npx shadcn-svelte@latest add button

# Add multiple components
npx shadcn-svelte@latest add button card dialog

# List all available components
npx shadcn-svelte@latest add

Import patterns

Components are typically imported from the project's $lib/components/ui directory:

<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import * as Card from "$lib/components/ui/card";
  import * as Dialog from "$lib/components/ui/dialog";
</script>

Some components use namespace imports (with * as) when they have multiple sub-components (Card, Dialog, Sheet, Table, etc.), while simpler components use named imports (Button, Input, Badge, etc.).

Important guidelines

• Always run detection first before suggesting shadcn-svelte components
• Always read component docs before using a component — don't guess at props or patterns
• Check installed components and add missing ones before importing
• Use the project's configured path — the components directory may vary based on components.json configuration
• Follow Svelte 5 patterns — shadcn-svelte uses runes ($state, $derived, $effect) and snippet-based composition
• Prefer composition — shadcn-svelte components are designed to be composed together, not used as monolithic blocks