用途:为 json-render 的 Svelte 应用提供预构建的 shadcn-svelte 组件定义与实现,方便按需选用标准 UI 组件。
主要能力:基于 Svelte 5 + Tailwind CSS 提供 36 个组件,涵盖布局(Card、Stack、Grid、Separator)、导航(Tabs、Accordion、Collapsible、Pagination)、覆盖层(Dialog、Drawer、Tooltip、Popover、DropdownMenu)、内容(Heading、Text、Image、Avatar、Badge、Alert、Carousel、Table)、反馈(Progress、Skeleton、Spinner)以及输入类(Button、Link、Input、Textarea、Select、Checkbox、Radio、Switch、Slider、Toggle、ToggleGroup、ButtonGroup)等。
两个入口:@json-render/shadcn-svelte/catalog 导出 shadcnComponentDefinitions,仅含目录 schema,无 Svelte 依赖,可安全用于服务端,适合服务端提示词生成;@json-render/shadcn-svelte 导出 shadcnComponents 与 shadcnComponentDefinitions,包含 Svelte 实现与目录 schema。
使用方式:从标准定义中显式挑选所需组件,不要展开全部定义。分别用 defineCatalog 定义目录、defineRegistry 定义注册表,挑选匹配的实现后,在 Svelte 组件中通过 Renderer 与 JsonUIProvider 渲染。
校验时机:所有表单组件支持 validateOn 控制校验运行时机——change(每次输入变化时校验,Select、Checkbox、Radio、Switch 的默认值)、blur(失去焦点时校验,Input、Textarea 的默认值)、submit(仅在表单提交时校验)。
限制与注意事项:/catalog 入口无 Svelte 依赖,可用于服务端提示词生成;组件使用 Tailwind CSS 类,应用须配置 Tailwind;组件实现使用打包的 shadcn-svelte 原语,而非应用自身的 $lib/components/ui/;所有表单输入支持 checks(类型与消息配对)校验与 validateOn 时机控制;事件方面,输入组件发出 change/submit/focus/blur,按钮发出 press,选择组件发出 change/select。