shadcn-svelte

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

shadcn-svelte

A framework for building UI, components, and design systems for Svelte. Components are added as source to the user's project via the CLI.

IMPORTANT: Run all CLI commands using the project's package runner:
npx shadcn-svelte@latest
,
pnpm dlx shadcn-svelte@latest
, or
bunx --bun shadcn-svelte@latest
— based on the project's package manager. Examples below use
npx shadcn-svelte@latest
but substitute the correct runner for the project.

一款为Svelte构建UI、组件和设计系统的框架。组件通过CLI以源码形式添加到用户项目中。

重要提示： 使用项目的包管理器运行所有CLI命令：
npx shadcn-svelte@latest
、
pnpm dlx shadcn-svelte@latest
或
bunx --bun shadcn-svelte@latest
—— 根据项目使用的包管理器选择。以下示例使用
npx shadcn-svelte@latest
，请根据实际情况替换为正确的命令。

Current Project Context

当前项目上下文

Read

components.json

at the project root and, when you need the live file layout, list the directory given by the

aliases.ui

path (resolved with the same rules as the CLI).

读取项目根目录下的

components.json

文件，当需要实时文件结构时，列出

aliases.ui

路径对应的目录（解析规则与CLI一致）。

Imports (Svelte)

导入规则（Svelte）

Each component lives in its own folder with an

index.ts

barrel. Match the installation docs:

Multi-part components (dialog, select, card, field, tabs, …):
```
import * as Dialog from "$lib/components/ui/dialog"
```
then
```
Dialog.Content
```
,
```
Dialog.Title
```
,
```
Card.Root
```
,
```
Card.Header
```
, etc. — whatever the barrel exports (short names and/or
```
Root as …
```
aliases).

Single-component barrels (only one meaningful component in the folder): named imports —

import { Button } from "$lib/components/ui/button"

and

<Button>

, not

import * as Button

Button.Root

. Same pattern for

{ Input }

{ Badge }

{ Spinner }

{ Checkbox }

{ Separator }

{ Skeleton }

, etc.

import * as Dialog from "$lib/components/ui/dialog";
import { Button } from "$lib/components/ui/button";
import { Separator } from "$lib/components/ui/separator";

Use the real aliases from

components.json

(often

$lib/components/ui/...

), not hardcoded paths.

每个组件都位于独立文件夹中，并包含

index.ts

桶文件。请遵循安装文档：

多部分组件（dialog、select、card、field、tabs等）：
```
import * as Dialog from "$lib/components/ui/dialog"
```
，然后使用
```
Dialog.Content
```
、
```
Dialog.Title
```
、
```
Card.Root
```
、
```
Card.Header
```
等——即桶文件导出的内容（短名称和/或
```
Root as …
```
别名）。
单组件桶文件（文件夹中仅有一个核心组件）：使用命名导入——
```
import { Button } from "$lib/components/ui/button"
```
并以
```
<Button>
```
形式使用，而非
```
import * as Button
```
+
```
Button.Root
```
。
```
{ Input }
```
、
```
{ Badge }
```
、
```
{ Spinner }
```
、
```
{ Checkbox }
```
、
```
{ Separator }
```
、
```
{ Skeleton }
```
等组件均遵循此模式。

import * as Dialog from "$lib/components/ui/dialog";
import { Button } from "$lib/components/ui/button";
import { Separator } from "$lib/components/ui/separator";

使用

components.json

中的真实别名（通常为

$lib/components/ui/...

），而非硬编码路径。

Principles

设计原则

Use existing components first. Run
```
npx shadcn-svelte@latest add
```
with no arguments to browse available components, or check Components before writing custom UI.
Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
Use built-in variants before custom styles.
```
variant="outline"
```
,
```
size="sm"
```
, etc.
Use semantic colors.
```
bg-primary
```
,
```
text-muted-foreground
```
— never raw values like
```
bg-blue-500
```
.

优先使用现有组件。运行不带参数的
```
npx shadcn-svelte@latest add
```
命令浏览可用组件，或在编写自定义UI前查看组件列表。
组合而非重造。设置页面 = Tabs + Card + 表单控件；仪表盘 = Sidebar + Card + Chart + Table。
优先使用内置变体而非自定义样式。例如
```
variant="outline"
```
、
```
size="sm"
```
等。
使用语义化颜色。如
```
bg-primary
```
、
```
text-muted-foreground
```
——绝不要使用
```
bg-blue-500
```
这类原始值。

Critical Rules

核心规则

These rules are always enforced. Each links to a file with Incorrect/Correct code pairs.

这些规则必须严格遵守。每条规则均链接至包含错误/正确代码示例的文件。

Styling & Tailwind → styling.md

样式与Tailwind → styling.md

class
for layout, not styling. Never override component colors or typography.

No
space-x-*
or
space-y-*
. Use

flex

with

gap-*

. For vertical stacks,

flex flex-col gap-*

Use
size-*
when width and height are equal.
```
size-10
```
not
```
w-10 h-10
```
.

Use
truncate
shorthand. Not

overflow-hidden text-ellipsis whitespace-nowrap

No manual
dark:
color overrides. Use semantic tokens (
```
bg-background
```
,
```
text-muted-foreground
```
).
Use
cn()
for conditional classes. Don't write manual template literal ternaries.
No manual
z-index
on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking.

class
用于布局而非样式。绝不要覆盖组件的颜色或排版。
禁止使用
space-x-*
或
space-y-*
。使用
```
flex
```
搭配
```
gap-*
```
。垂直堆叠使用
```
flex flex-col gap-*
```
。
宽高相等时使用
size-*
。用
```
size-10
```
而非
```
w-10 h-10
```
。

使用
truncate
简写。不要写

overflow-hidden text-ellipsis whitespace-nowrap

。

禁止手动添加
dark:
颜色覆盖。使用语义化令牌（如
```
bg-background
```
、
```
text-muted-foreground
```
）。
使用
cn()
处理条件类。不要手动编写模板字面量三元表达式。
覆盖类组件禁止手动设置
z-index
。Dialog、Sheet、Popover等组件会自行处理层级堆叠。

Forms & Inputs → forms.md

表单与输入框 → forms.md

Forms use
Field.FieldGroup
+
Field.Field
. Never use raw

div

with

space-y-*

grid gap-*

for form layout.

InputGroup
uses
InputGroup.Input
/
InputGroup.Textarea
. Never raw

Input

Textarea

inside

InputGroup.Root

Buttons inside inputs use
InputGroup.Root
+
InputGroup.Addon
.
Option sets (2–7 choices) use
ToggleGroup
. Don't loop
```
Button
```
with manual active state.
Field.FieldSet
+
Field.FieldLegend
for grouping related checkboxes/radios. Don't use a
```
div
```
with a heading.

Field validation uses
data-invalid
+
aria-invalid
.

data-invalid

Field

aria-invalid

on the control. For disabled:

data-disabled

Field

disabled

on the control.

表单使用
Field.FieldGroup
+
Field.Field
。绝不要使用原始
```
div
```
搭配
```
space-y-*
```
或
```
grid gap-*
```
进行表单布局。

InputGroup
使用
InputGroup.Input
/
InputGroup.Textarea
。绝不要在

InputGroup.Root

中直接使用

Input

Textarea

。

输入框内的按钮使用
InputGroup.Root
+
InputGroup.Addon
。
选项集（2-7个选项）使用
ToggleGroup
。不要循环渲染
```
Button
```
并手动管理激活状态。
相关复选框/单选框分组使用
Field.FieldSet
+
Field.FieldLegend
。不要使用带标题的
```
div
```
。
字段验证使用
data-invalid
+
aria-invalid
。在
```
Field
```
上添加
```
data-invalid
```
，在控件上添加
```
aria-invalid
```
。禁用状态：在
```
Field
```
上添加
```
data-disabled
```
，在控件上添加
```
disabled
```
。

Component Structure → composition.md

组件结构 → composition.md

Items always inside their Group.

Select.Item

→

Select.Group

DropdownMenu.Item

→

DropdownMenu.Group

Command.Item

→

Command.Group

Custom triggers. Wrap controls in
```
Dialog.Trigger
```
/
```
AlertDialog.Trigger
```
, or control open state with
```
bind:open
```
on the root — see component docs.
Dialog, Sheet, and Drawer always need a Title.
```
Dialog.Title
```
,
```
Sheet.Title
```
,
```
Drawer.Title
```
required for accessibility. Use
```
class="sr-only"
```
if visually hidden.

Use full Card composition.

Card.Header

Card.Title

Card.Description

Card.Content

Card.Footer

. Don't dump everything in

Card.Content

Button has no
isPending
/
isLoading
. Compose with

Spinner

inside

Button

disabled

; use

data-icon="inline-start"

inline-end

Spinner

for correct spacing (

import { Button }

import { Spinner }

Tabs.Trigger
must be inside
Tabs.List
. Never render triggers directly in
```
Tabs
```
.
Avatar
always needs
Avatar.Fallback
. For when the image fails to load.

子项必须位于对应Group内。

Select.Item

需放在

Select.Group

中；

DropdownMenu.Item

需放在

DropdownMenu.Group

中；

Command.Item

需放在

Command.Group

中。

自定义触发器。将控件包裹在
```
Dialog.Trigger
```
/
```
AlertDialog.Trigger
```
中，或在根组件上使用
```
bind:open
```
控制打开状态——详见组件文档。
Dialog、Sheet和Drawer必须包含Title。
```
Dialog.Title
```
、
```
Sheet.Title
```
、
```
Drawer.Title
```
是无障碍访问的必填项。若需视觉隐藏，可添加
```
class="sr-only"
```
。
完整使用Card组合。使用
```
Card.Header
```
/
```
Card.Title
```
/
```
Card.Description
```
/
```
Card.Content
```
/
```
Card.Footer
```
。不要将所有内容都放在
```
Card.Content
```
中。

Button无
isPending
/
isLoading
属性。在

Button

内组合

Spinner

并添加

disabled

；在

Spinner

上使用

data-icon="inline-start"

inline-end

确保间距正确（需导入

{ Button }

和

{ Spinner }

）。

Tabs.Trigger
必须放在
Tabs.List
内。绝不要直接在
```
Tabs
```
中渲染触发器。
Avatar
必须包含
Avatar.Fallback
。用于图片加载失败时的占位。

Use Components, Not Custom Markup → composition.md

使用组件而非自定义标记 → composition.md

Use existing components before custom markup. Check if a component exists before writing a styled
```
div
```
.
Callouts use
Alert
. Don't build custom styled divs.
Empty states use
Empty
. Don't build custom empty state markup.
Toast via
svelte-sonner
. Use
```
toast()
```
from
```
svelte-sonner
```
with the Sonner component from your UI folder.
Use
Separator
instead of
```
<hr>
```
or a
```
div
```
with border-only classes.
Use
Skeleton
for loading placeholders. No custom
```
animate-pulse
```
divs.
Use
Badge
instead of custom styled spans.

优先使用现有组件而非自定义标记。在编写带样式的
```
div
```
前，先确认是否已有对应组件。
提示框使用
Alert
。不要构建自定义样式的div。
空状态使用
Empty
。不要构建自定义空状态标记。
通知使用
svelte-sonner
。从
```
svelte-sonner
```
导入
```
toast()
```
并使用UI文件夹中的Sonner组件。
**使用
```
Separator
```
**替代
```
<hr>
```
或仅含边框类的
```
div
```
。
加载占位使用
Skeleton
。不要自定义
```
animate-pulse
```
的div。
**使用
```
Badge
```
**替代自定义样式的span。

Icons → icons.md

图标 → icons.md

Icons in
<Button>
use
data-icon
.

data-icon="inline-start"

data-icon="inline-end"

on the icon.

No sizing classes on icons inside components. Components handle icon sizing via CSS. No
```
size-4
```
or
```
w-4 h-4
```
.
Pass icons as components. Import from the configured
```
iconLibrary
```
(e.g.
```
@lucide/svelte
```
), not string keys.

<Button>
中的图标使用
data-icon
。在图标上添加

data-icon="inline-start"

或

data-icon="inline-end"

。

组件内的图标不要添加尺寸类。组件会通过CSS处理图标尺寸。不要使用
```
size-4
```
或
```
w-4 h-4
```
。
以组件形式传入图标。从配置的
```
iconLibrary
```
（如
```
@lucide/svelte
```
）导入，而非使用字符串键。

CLI

Presets — copy the encoded string from the design-system builder on shadcn-svelte.com and pass it to
```
npx shadcn-svelte@latest init --preset <code>
```
.

预设 —— 从shadcn-svelte.com的设计系统构建器中复制编码字符串，然后传入
```
npx shadcn-svelte@latest init --preset <code>
```
命令。

Key Patterns

核心模式

These are the most common patterns that differentiate correct shadcn-svelte code. For edge cases, see the linked rule files above.

svelte

<script lang="ts">
  import * as Field from "$lib/components/ui/field";
  import { Input } from "$lib/components/ui/input";
  import { Button } from "$lib/components/ui/button";
  import SearchIcon from "@lucide/svelte/icons/search";
  import { Badge } from "$lib/components/ui/badge";
  import * as Avatar from "$lib/components/ui/avatar";
</script>

<!-- Form layout: Field.FieldGroup + Field.Field, not div + Label. -->
<Field.FieldGroup>
  <Field.Field>
    <Field.FieldLabel for="email">Email</Field.FieldLabel>
    <Input id="email" />
  </Field.Field>
</Field.FieldGroup>

<!-- Validation: data-invalid on Field, aria-invalid on the control. -->
<Field.Field data-invalid>
  <Field.FieldLabel for="email">Email</Field.FieldLabel>
  <Input id="email" aria-invalid />
  <Field.FieldDescription>Invalid email.</Field.FieldDescription>
</Field.Field>

<!-- Icons in buttons: data-icon, no sizing classes. -->
<Button>
  <SearchIcon data-icon="inline-start" />
  Search
</Button>

<!-- Spacing: gap-*, not space-y-*. -->
<div class="flex flex-col gap-4"></div>

<!-- Equal dimensions: size-*, not w-* h-*. -->
<Avatar.Root class="size-10">
  <Avatar.Image src="/u.png" alt="User" />
  <Avatar.Fallback>U</Avatar.Fallback>
</Avatar.Root>

<!-- Status colors: Badge variants or semantic tokens, not raw colors. -->
<Badge variant="secondary">+20.1%</Badge>

以下是区分shadcn-svelte代码是否规范的最常见模式。如需了解边缘情况，请参阅上述链接的规则文件。

svelte

<script lang="ts">
  import * as Field from "$lib/components/ui/field";
  import { Input } from "$lib/components/ui/input";
  import { Button } from "$lib/components/ui/button";
  import SearchIcon from "@lucide/svelte/icons/search";
  import { Badge } from "$lib/components/ui/badge";
  import * as Avatar from "$lib/components/ui/avatar";
</script>

<!-- 表单布局：使用Field.FieldGroup + Field.Field，而非div + Label。 -->
<Field.FieldGroup>
  <Field.Field>
    <Field.FieldLabel for="email">邮箱</Field.FieldLabel>
    <Input id="email" />
  </Field.Field>
</Field.FieldGroup>

<!-- 验证：在Field上添加data-invalid，在控件上添加aria-invalid。 -->
<Field.Field data-invalid>
  <Field.FieldLabel for="email">邮箱</Field.FieldLabel>
  <Input id="email" aria-invalid />
  <Field.FieldDescription>无效邮箱。</Field.FieldDescription>
</Field.Field>

<!-- 按钮中的图标：使用data-icon，不添加尺寸类。 -->
<Button>
  <SearchIcon data-icon="inline-start" />
  搜索
</Button>

<!-- 间距：使用gap-*，而非space-y-*。 -->
<div class="flex flex-col gap-4"></div>

<!-- 等尺寸：使用size-*，而非w-* h-*。 -->
<Avatar.Root class="size-10">
  <Avatar.Image src="/u.png" alt="用户" />
  <Avatar.Fallback>U</Avatar.Fallback>
</Avatar.Root>

<!-- 状态颜色：使用Badge变体或语义化令牌，而非原始颜色。 -->
<Badge variant="secondary">+20.1%</Badge>

Component Selection

组件选择指南

Need	Use
Button/action	`Button` with appropriate variant ( `import { Button }` )
Form inputs	`Input` , `Select` , `Combobox` , `Switch` , `Checkbox` , `RadioGroup` , `Textarea` , `InputOTP` , `Slider`
Toggle between 2–5 options	`ToggleGroup.Root` + `ToggleGroup.Item`
Data display	`Table` , `Card` , `Badge` , `Avatar`
Navigation	`Sidebar` , `NavigationMenu` , `Breadcrumb` , `Tabs` , `Pagination`
Overlays	`Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)
Feedback	`svelte-sonner` (toast), `Alert` , `Progress` , `Skeleton` , `Spinner`
Command palette	`Command` inside `Dialog`
Charts	`Chart` (LayerChart)
Layout	`Card` , `Separator` , `Resizable` , `ScrollArea` , `Accordion` , `Collapsible`
Empty states	`Empty`
Menus	`DropdownMenu` , `ContextMenu` , `Menubar`
Tooltips/info	`Tooltip` , `HoverCard` , `Popover`

需求场景	推荐使用组件
按钮/操作控件	带对应变体的 `Button` （导入 `{ Button }` ）
表单输入控件	`Input` 、 `Select` 、 `Combobox` 、 `Switch` 、 `Checkbox` 、 `RadioGroup` 、 `Textarea` 、 `InputOTP` 、 `Slider`
2-5个选项间切换	`ToggleGroup.Root` + `ToggleGroup.Item`
数据展示	`Table` 、 `Card` 、 `Badge` 、 `Avatar`
导航控件	`Sidebar` 、 `NavigationMenu` 、 `Breadcrumb` 、 `Tabs` 、 `Pagination`
覆盖层组件	`Dialog` （模态框）、 `Sheet` （侧边面板）、 `Drawer` （底部面板）、 `AlertDialog` （确认框）
反馈组件	`svelte-sonner` （通知）、 `Alert` 、 `Progress` 、 `Skeleton` 、 `Spinner`
命令面板	`Dialog` 内嵌套 `Command`
图表	`Chart` （LayerChart）
布局组件	`Card` 、 `Separator` 、 `Resizable` 、 `ScrollArea` 、 `Accordion` 、 `Collapsible`
空状态	`Empty`
菜单组件	`DropdownMenu` 、 `ContextMenu` 、 `Menubar`
提示/信息弹窗	`Tooltip` 、 `HoverCard` 、 `Popover`

Key Fields

核心配置字段

Use

components.json

and the filesystem — not a separate

info

command:

aliases
→ use the actual alias prefix from config (e.g.
```
$lib/
```
), never hardcode unrelated projects.
tailwind.css
→ the global CSS file where theme variables live. Edit this file for theme tweaks; don't add a second globals file unless the user already uses one.
style
→ visual treatment (e.g.
```
nova
```
,
```
vega
```
, …) and registry style path.

iconLibrary
→ determines icon packages (

@lucide/svelte

@tabler/icons-svelte

, etc.). Never assume

@lucide/svelte

registry
→ where the CLI fetches components; default official registry at
```
shadcn-svelte.com
```
.
resolvedPaths
(conceptual) → the CLI resolves
```
aliases
```
to absolute paths; list
```
aliases.ui
```
on disk to see installed components.

See cli.md for commands and flags.

使用

components.json

和文件系统——无需单独的

info

命令：

aliases
→ 使用配置中的实际别名前缀（如
```
$lib/
```
），绝不要硬编码其他项目的路径。
tailwind.css
→ 存储主题变量的全局CSS文件。如需调整主题，请编辑此文件；除非用户已使用其他全局文件，否则不要新增第二个全局文件。
style
→ 视觉风格（如
```
nova
```
、
```
vega
```
等）及注册表样式路径。

iconLibrary
→ 确定图标包（如

@lucide/svelte

、

@tabler/icons-svelte

等）。不要默认使用

@lucide/svelte

。

registry
→ CLI获取组件的来源；默认官方注册表为
```
shadcn-svelte.com
```
。
resolvedPaths
（概念性）→ CLI将
```
aliases
```
解析为绝对路径；列出磁盘上的
```
aliases.ui
```
路径即可查看已安装组件。

有关命令和参数，请参阅cli.md。

Component Docs, Examples, and Usage

组件文档、示例与使用方法

Open

https://shadcn-svelte.com/docs/components/<name>.md

for docs and examples. When creating, fixing, debugging, or using a component, read the official page first so you follow the documented APIs.

访问

https://shadcn-svelte.com/docs/components/<name>.md

查看文档和示例。在创建、修复、调试或使用组件前，请先阅读官方文档，确保遵循已记录的API。

Workflow

工作流程

Get project context — read
```
components.json
```
and list the UI components directory when needed.
Check installed components first — before running
```
add
```
, list files under the resolved
```
ui
```
path. Don't import components that haven't been added, and don't re-add ones already present unless updating.
Discover components —
```
npx shadcn-svelte@latest add
```
with no arguments (interactive list), or the docs site.
Install or update —
```
npx shadcn-svelte@latest add <name>
```
or a registry URL. To refresh existing files from the registry, use
```
npx shadcn-svelte@latest update
```
(see cli.md).
Fix imports in third-party / URL-added items — After adding from a custom registry URL, check for hardcoded paths that don't match the project's
```
aliases
```
. Rewrite imports to use the project's
```
ui
```
/
```
lib
```
aliases from
```
components.json
```
.
Review added components — After adding, read the added files and verify composition (groups, titles, validation attrs). Align icon imports with
```
iconLibrary
```
.
Remote registry items — Adding by URL is explicit; if the user wants a component from an unknown source, confirm the registry URL or item before running
```
add
```
.

获取项目上下文 —— 读取
```
components.json
```
，必要时列出UI组件目录。
优先检查已安装组件 —— 在运行
```
add
```
命令前，列出解析后的
```
ui
```
路径下的文件。不要导入未添加的组件，除非需要更新，否则不要重新添加已存在的组件。
发现组件 —— 运行不带参数的
```
npx shadcn-svelte@latest add
```
（交互式列表），或访问文档网站。
安装或更新 —— 运行
```
npx shadcn-svelte@latest add <name>
```
或指定注册表URL。如需从注册表刷新现有文件，使用
```
npx shadcn-svelte@latest update
```
（详见cli.md）。
修复第三方/URL添加组件的导入 —— 从自定义注册表URL添加组件后，检查是否存在与项目
```
aliases
```
不匹配的硬编码路径。将导入重写为使用项目
```
components.json
```
中的
```
ui
```
/
```
lib
```
别名。
审核添加的组件 —— 添加完成后，读取添加的文件并验证组合方式（分组、标题、验证属性）。确保图标导入与
```
iconLibrary
```
一致。
远程注册表组件 —— 通过URL添加组件需明确操作；若用户需要来自未知源的组件，在运行
```
add
```
前请确认注册表URL或组件信息。

Updating Components

更新组件

Use the update
command to pull the latest registry versions of components already in the project. Review changes with

git diff

after

update

Commit or stash local work.

Run

npx shadcn-svelte@latest update [component]

--all

Resolve merge conflicts if you had customized files.
Never use
--overwrite
on
add
without the user's explicit approval when it would destroy intentional edits.

使用**

update

**命令拉取项目中已安装组件的最新注册表版本。更新后使用

git diff

查看变更。

提交或暂存本地修改。

运行

npx shadcn-svelte@latest update [component]

或

--all

。

若文件已自定义，解决合并冲突。
未经用户明确许可，绝不要在
add
命令中使用
--overwrite
，否则会覆盖用户的有意修改。

Quick Reference

快速参考

bash

undefined

bash

undefined

Initialize shadcn-svelte in your project.

在项目中初始化shadcn-svelte。

npx shadcn-svelte@latest init

Initialize with a preset string from the docs site builder.

使用文档网站构建器中的预设字符串初始化。

npx shadcn-svelte@latest init --preset <code>

Add components (interactive when run with no names).

添加组件（不带参数时为交互式列表）。

npx shadcn-svelte@latest add npx shadcn-svelte@latest add button card dialog npx shadcn-svelte@latest add --all

Update components already installed.

更新已安装的组件。

npx shadcn-svelte@latest update button npx shadcn-svelte@latest update --all --yes

Build a custom registry (registry authors).

构建自定义注册表（注册表作者使用）。

npx shadcn-svelte@latest registry build


**Registry:** default `https://shadcn-svelte.com/registry` — override in `components.json` if needed.  
**Docs:** [shadcn-svelte.com](https://shadcn-svelte.com)

npx shadcn-svelte@latest registry build


**注册表：** 默认地址为`https://shadcn-svelte.com/registry`——如需修改，可在`components.json`中配置。  
**文档：** [shadcn-svelte.com](https://shadcn-svelte.com)

Detailed References

详细参考

rules/forms.md — Field.FieldGroup, Field.Field, InputGroup, ToggleGroup, Field.FieldSet, validation states
rules/composition.md — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
rules/icons.md — data-icon, icon sizing, passing icon components
rules/styling.md — Semantic colors, variants, class, spacing, size, truncate, dark mode, cn(), z-index
cli.md — Commands, flags, registry
customization.md — Theming, CSS variables, extending components

rules/forms.md —— Field.FieldGroup、Field.Field、InputGroup、ToggleGroup、Field.FieldSet、验证状态
rules/composition.md —— 分组、覆盖层、Card、Tabs、Avatar、Alert、Empty、Toast、Separator、Skeleton、Badge、Button加载状态
rules/icons.md —— data-icon、图标尺寸、传入图标组件
rules/styling.md —— 语义化颜色、变体、class、间距、size、truncate、深色模式、cn()、z-index
cli.md —— 命令、参数、注册表
customization.md —— 主题定制、CSS变量、组件扩展