企业官网建设流程全解析

shadcn-svelte 10 分钟上手：一行命令搭出可定制的 UI 组件库

【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte

做过 Svelte 项目的人多半撞过同一堵墙：React 那边 shadcn/ui 遍地开花，到自己项目里只能硬凑——要么从别的框架的库抄组件再改 API，要么对着设计稿从零画按钮、调边框。shadcn-svelte 就是来拆这堵墙的：它把这套组件以源码形式复制进你的 Svelte 项目，改样式、改结构都算你自己的事。

不是组件库，是组件库的零件

它是社区发起的 shadcn/ui Svelte 移植版（原作者已授权）。和"装个 npm 包然后 import"的传统思路不同，这里拿到的是散落在你项目里的源码文件——项目文档的原话是：这不是一个组件库，而是你搭建自己组件库的方式。

• 59 个开箱即用组件：表单、弹窗、图表、侧边栏全覆盖
• 底层基于 Bits UI，键盘导航和屏幕阅读器支持自带
• 扁平化 JSON 注册表加 CLI，组件能跨项目分发

跑通它：init 一键安装，add 按需搬组件

环境要求一行列完：Node.js 18+，任意包管理器。

在现成的 SvelteKit 或 Vite 项目目录里跑两条命令：

npx shadcn-svelte@latest init npx shadcn-svelte@latest add button card badge

init 会问你几个问题：基础色（neutral、zinc、stone 等 7 种里挑）、全局 CSS 路径、几个 import 别名，答完依赖、cn工具函数和整套 CSS 变量就都装好了。add 则把组件源码连同依赖放进$lib/components/ui下的独立文件夹，index.ts统一出口，一行 import 全搞定。想先看成品长什么样，clone 仓库（https://gitcode.com/GitHub_Trending/sh/shadcn-svelte）跑pnpm install && pnpm dev，localhost:5173 就是完整的组件示例站。

三个核心能力，改起来都不费劲

一条命令搬组件，大组件也不例外

add 支持单个组件名、一次多个，加-a全量安装。components.json记录 baseColor 和别名，CLI 照着它把文件放对位置。Svelte 一个组件拆多个文件的问题也被抹平了：侧边栏这种几十个文件的大家伙，同样是一条add sidebar的事。

改 CSS 变量换肤，明暗模式两行搞定

所有颜色走 CSS 变量，命名规则固定：--primary管背景，--primary-foreground管前景。想加品牌色，往:root和.dark里各塞两行变量再挂到@theme，新的bg-warning工具类就有了，注册表里还有 24 套配色可以整盘换。深色模式装一个mode-watcher，根布局放一个<ModeWatcher />，再加个切换开关，整个 UI 就跟着系统走。

注册表让组件能分发，也能被 AI 读

每个组件在 registry 里是一段扁平 JSON，描述文件、依赖和属性。CLI 提供registry build命令，你能把自家组件打包发给团队的其他项目；luma、lyra、rhea、sera 等 8 套风格预设也是用同一套机制分发的。开放源码还有个隐性好处：LLM 能读懂你的组件，照着 schema 生成新的。

十分钟做一张数据卡片

场景：后台首页要一张带趋势徽标的统计卡。

你只需要：init 之后add card badge两个组件，然后这样组合——

<script> import * as Card from '$lib/components/ui/card'; import { Badge } from '$lib/components/ui/badge'; </script> <Card> <CardHeader><CardTitle>本周新增用户</CardTitle></CardHeader> <CardContent>1,284 人 <Badge variant="secondary">+12%</Badge></CardContent> </Card>

你得到：统一的圆角、间距和明暗配色，ARIA 角色齐整；想改标题字号直接改源码，不用找哪个 wrapper 透传 props。换成图表卡、登录表单，套路完全一样。

接下来往哪走

• 照抄组件 demo：docs/content/components/，59 个组件的文档都带可运行示例和 API 表，适合刚上手时逐个翻
• 管多个项目：docs/content/cli.md，init/add/apply/registry build 全在这，适合组件要复用到第二、第三个项目的团队
• 补深色模式：docs/content/dark-mode/，SvelteKit 和 Vite 各有一份接入步骤，适合给老项目加明暗切换
• 把自己做的组件发出去：docs/content/registry/index.md，走注册表 schema，适合想沉淀内部组件库的场景

组件源码就躺在你项目里，改坏了没人兜底——这也正是它最好用的地方。

【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte