Shadcn Svelte

shadcn-svelte

shadcn-svelte is a Svelte port of shadcn-ui - accessible UI components built with Tailwind CSS and Bits UI.

When to Use

• Installing shadcn-svelte components (Button, Dialog, Card, etc.)
• Setting up theming with Tailwind CSS v4
• Configuring dark mode with mode-watcher
• Building accessible forms with Bits UI
• Troubleshooting component issues

Quick Reference

# Install shadcn-svelte
bunx shadcn-svelte@latest init

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

# Add form components
bunx shadcn-svelte@latest add form
bunx shadcn-svelte@latest add input
bunx shadcn-svelte@latest add select

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

<Card.Root>
  <Card.Header>
    <Card.Title>Title</Card.Title>
    <Card.Description>Description</Card.Description>
  </Card.Header>
  <Card.Content>
    Content here
  </Card.Content>
  <Card.Footer>
    <Button>Click me</Button>
  </Card.Footer>
</Card.Root>

Key Concepts

• Components - Installed to $lib/components/ui/
• Bits UI - Headless primitives for accessibility
• Tailwind v4 - Styling with CSS-first config
• Dark Mode - Via mode-watcher package

References

• Design Tokens - CRITICAL: Read before styling
• Installation
• Dark Mode Setup
• Component Categories
• Troubleshooting
• Form Components

Related Skills

• tailwind - Styling
• svelte-kit - Framework