shadcn-svelte

shadcn-svelte

shadcn/ui 的 Svelte 5 / SvelteKit 移植版本，使用 Bits UI 和 Tailwind CSS 构建，设计精美且易于访问的组件。

快速开始

安装

# SvelteKit
pnpm dlx shadcn-svelte@latest init

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

基本用法

组件使用命名空间导入：

<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>

关键模式

组件导入模式

import * as Dialog from "$lib/components/ui/dialog/index.js";


import { Button } from "$lib/components/ui/button/index.js";
import { Input } from "$lib/components/ui/input/index.js";

表单实现

使用 Superforms + Formsnap 构建表单：

<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>

深色模式

<script lang="ts">
  import { ModeWatcher } from "mode-watcher";
</script>

<ModeWatcher />
{@render children()}

使用 mode-watcher 的 toggleMode()、setMode("dark") 或 resetMode() 切换。

参考文档

详细文档整理在 references/ 中：

• 概览：about.md、cli.md、components-json.md、theming.md
• 安装：installation/sveltekit.md、installation/astro.md、installation/vite.md
• 组件：components/[name].md — 59 篇组件指南
• 深色模式：dark-mode/svelte.md、dark-mode/astro.md
• 迁移：migration/svelte-5.md、migration/tailwind-v4.md
• 注册表：registry/getting-started.md — 自定义注册表创建指南

查找组件文档

对于任何组件，请阅读 references/components/[component-name].md：

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

常见任务

任务	参考
添加组件	pnpm dlx shadcn-svelte@latest add [name]
表单验证	references/components/form.md
数据表格	references/components/data-table.md
主题/颜色	references/theming.md
深色模式	references/dark-mode/svelte.md
自定义注册表	references/registry/getting-started.md