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

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-sveltelatest init npx shadcn-sveltelatest add button card badgeinit 会问你几个问题基础色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 devlocalhost: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 CardHeaderCardTitle本周新增用户/CardTitle/CardHeader CardContent1,284 人 Badge variantsecondary12%/Badge/CardContent /Card你得到统一的圆角、间距和明暗配色ARIA 角色齐整想改标题字号直接改源码不用找哪个 wrapper 透传 props。换成图表卡、登录表单套路完全一样。接下来往哪走照抄组件 demodocs/content/components/59 个组件的文档都带可运行示例和 API 表适合刚上手时逐个翻管多个项目docs/content/cli.mdinit/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考