shadcn-svelte

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

shadcn-svelte

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

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

Quick Start

快速开始

Installation

安装

bash

undefined

bash

undefined

SvelteKit

pnpm dlx shadcn-svelte@latest init

Add components

添加组件

pnpm dlx shadcn-svelte@latest add button card dialog

undefined

pnpm dlx shadcn-svelte@latest add button card dialog

undefined

Basic Usage

基本使用

Components use namespace imports:

svelte

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

组件使用命名空间导入：

svelte

<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

组件导入模式

svelte

<!-- 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";

svelte

<!-- 复合组件（大多数组件） -->
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";

Form Implementation

表单实现

Use Superforms + Formsnap for forms:

svelte

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

使用Superforms + Formsnap实现表单：

svelte

<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

暗黑模式

svelte

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

<ModeWatcher />
{@render children()}

Toggle with

toggleMode()

setMode("dark")

, or

resetMode()

from mode-watcher.

svelte

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

<ModeWatcher />
{@render children()}

可使用mode-watcher中的

toggleMode()

、

setMode("dark")

或

resetMode()

进行切换。

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

详细文档组织在

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
```
——自定义注册表创建指南

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

对于任意组件，可查看

references/components/[component-name].md

：

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

Common Tasks

常见任务

Task	Reference
Add a component	`pnpm dlx shadcn-svelte@latest add [name]`
Form validation	`references/components/form.md`
Data tables	`references/components/data-table.md`
Theming/colors	`references/theming.md`
Dark mode	`references/dark-mode/svelte.md`
Custom registry	`references/registry/getting-started.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`