Shadcn Svelte

shadcn-svelte

A Svelte 5 / SvelteKit port of shadcn/​ui - beautifully designed, accessible components built with Bits UI and Tailwind CSS.

Quick Start

Installation

# SvelteKit
pnpm dlx shadcn-svelte@latest init

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

Basic Usage

Components use namespace imports:

<script lang="ts">
  import * as Card from "$lib/​components/​ui/​card/​index.js";
  import { Button } from "$lib/​components/​ui/​button/​index.js";
</​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>Action</​Button>
  </​Card.Footer>
</​Card.Root>

Key Patterns

Component Import Pattern

<!-- Compound components (most components) -->
import * as Dialog from "$lib/​components/​ui/​dialog/​index.js";

<!-- Single components -->
import { Button } from "$lib/​components/​ui/​button/​index.js";
import { Input } from "$lib/​components/​ui/​input/​index.js";

Form Implementation

Use Superforms + Formsnap for forms:

<script lang="ts">
  import * as Form from "$lib/​components/​ui/​form/​index.js";
  import { superForm } from "sveltekit-superforms";

  let { data } = $props();
  const form = superForm(data.form);
</​script>

<form method="POST" use:form.enhance>
  <Form.Field {form} name="email">
    <Form.Control>
      {#snippet children({ props })}
        <Input {...props} type="email" />
      {/​snippet}
    </​Form.Control>
    <Form.FieldErrors />
  </​Form.Field>
</​form>

Dark Mode

<!-- +layout.svelte -->
<script lang="ts">
  import { ModeWatcher } from "mode-watcher";
</​script>

<ModeWatcher />
{@render children()}

Toggle with toggleMode(), setMode("dark"), or resetMode() from mode-watcher.

Reference Documentation

Detailed documentation is organized in references/:

• Overview: about.md, cli.md, components-json.md, theming.md
• Installation: installation/​sveltekit.md, installation/​astro.md, installation/​vite.md
• Components: components/[name].md - 59 component guides
• Dark Mode: dark-mode/​svelte.md, dark-mode/​astro.md
• Migration: migration/​svelte-5.md, migration/​tailwind-v4.md
• Registry: registry/​getting-started.md - custom registry creation

Finding Component Documentation

For any component, read references/​components/[component-name].md:

• Button → references/​components/​button.md
• Dialog → references/​components/​dialog.md
• Data Table → references/​components/​data-table.md

Common Tasks