SuperAPI AI 工具集

shadcn-svelte-skill

前端与建站

查看项目

更新于 10-15 21:47

技能介绍

用途:为 Svelte/SvelteKit 项目构建可访问、可定制的 UI 组件,基于 shadcn-svelte(shadcn/ui 的 Svelte 移植版),配合 Tailwind CSS v4.1 的 @tailwindcss/vite 插件与 TypeScript。适用于组件化应用、需要按钮/表单/弹窗/数据表格等场景,不适合轻量静态站点或追求最小依赖的项目。

主要能力:shadcn-svelte 属于复制粘贴式组件基础设施而非传统 npm 包,组件代码位于 $lib/components/ui/ 目录,可完全自定义且无版本锁定,底层基于 Bits UI 保证可访问性,用 CSS 变量做主题。支持通过 CLI 添加单个、多个或全部组件,并可查看组件列表。

setup 用法:创建 SvelteKit 项目后安装 tailwindcss 与 @tailwindcss/vite,运行 pnpm dlx shadcn-svelte@latest init 完成初始化;在 vite.config.ts 中加入 tailwindcss() 插件,在 src/app.css 中使用 @import "tailwindcss" 并在布局中引入。添加组件示例:pnpm dlx shadcn-svelte@latest add button card dialog。

数据表格:推荐使用 TanStack Table v8(@tanstack/table-core),支持排序、过滤、分页与行选择;通过 createSvelteTable、FlexRender 与 renderComponent/renderSnippet 等辅助函数,配合 Svelte 5 runes 管理状态;可用 sveltekit-superforms 与 zod 实现表单校验。

限制:资料未提供具体收费、许可与性能数据;使用前需确认已有 Svelte/SvelteKit 与 Tailwind v4.1 环境。资料中另提到 Skeleton UI、Melt UI 等替代方案,可作对照选择。