SuperAPI AI 工具集

svelte5-showcase-components

前端与建站

查看项目

更新于 10-15 20:34

技能介绍

用途:该技能提供 Svelte 5 Showcase 组件库的完整参考,帮助在 Svelte 5 项目中查找、使用、集成和调试组件。组件库共 49 个生产级组件,分为 7 类:Primitives(24 个,按钮、输入、表单、对话框等)、Navigation(6 个)、Data Display(6 个)、Overlays(5 个)、Feedback(2 个)、Layout(2 个)、Custom(4 个)。

主要能力:支持按名称查询组件、查看组件分类与位置、获取集成命令、参考 Svelte 5 runes 用法、表单验证示例(sveltekit-superforms + Zod)、Tailwind 样式模式,以及排查导入、runes 语法、表单验证、TypeScript 类型等常见问题。

使用方式:推荐用 shadcn-svelte CLI 添加组件,例如 npx shadcn-svelte@latest add button;也可手动复制组件目录并更新 barrel 导出,再安装依赖 npm install bits-ui clsx tailwind-merge tailwind-variants lucide-svelte。组件使用 Svelte 5 runes($state、$derived、$effect、$props),表单可结合 Zod 与 sveltekit-superforms 做客户端和服务端校验。

适用场景:用 Svelte 5 构建 UI 时需要组件参考、寻找可访问组件模式、需要表单校验示例、或调试组件集成问题。

限制:要求 Node.js v18+、TypeScript v5 严格模式、Svelte v5.2.0+、SvelteKit v2.9.0+、Tailwind CSS v4;Vite 配置中 Tailwind 插件必须位于 SvelteKit 之前;不可使用 Svelte 4 的响应式语法。资料未提供收费、价格或平台信息。