shadcn-svelte

@json-render/shadcn-svelte

为 json-render 预先构建的 shadcn-svelte 组件定义和实现。提供 36 个基于 Svelte 5 + Tailwind CSS 构建的组件。

两个入口点

入口点	导出内容	用途
@json-render/shadcn-svelte/catalog	shadcnComponentDefinitions	目录 schema（无 Svelte 依赖，可安全用于服务端）
@json-render/shadcn-svelte	shadcnComponents、shadcnComponentDefinitions	Svelte 实现 + 目录 schema

使用模式

从标准定义中选择所需的组件。不要展开所有定义——请明确选择应用实际使用的组件：

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/svelte/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";
import { defineRegistry } from "@json-render/svelte";
import { shadcnComponents } from "@json-render/shadcn-svelte";

// Catalog: pick definitions
const catalog = defineCatalog(schema, {
  components: {
    Card: shadcnComponentDefinitions.Card,
    Stack: shadcnComponentDefinitions.Stack,
    Heading: shadcnComponentDefinitions.Heading,
    Button: shadcnComponentDefinitions.Button,
    Input: shadcnComponentDefinitions.Input,
  },
  actions: {},
});

// Registry: pick matching implementations
const { registry } = defineRegistry(catalog, {
  components: {
    Card: shadcnComponents.Card,
    Stack: shadcnComponents.Stack,
    Heading: shadcnComponents.Heading,
    Button: shadcnComponents.Button,
    Input: shadcnComponents.Input,
  },
});

然后在 Svelte 组件中渲染：

<script lang="ts">
  import { Renderer, JsonUIProvider } from "@json-render/svelte";

  export let spec;
  export let registry;
</script>

<JsonUIProvider initialState={spec?.state ?? {}}>
  <Renderer {spec} {registry} />
</JsonUIProvider>

可用组件

布局

• Card - 容器，可选标题、描述、最大宽度和居中
• Stack - Flex 容器，支持方向、间距、对齐和分布
• Grid - 网格布局，支持列数（数字）和间距
• Separator - 视觉分隔线，支持方向

导航

• Tabs - 标签页导航，包含 tabs 数组、defaultValue、value
• Accordion - 可折叠分区，包含 items 数组和 type（single/multiple）
• Collapsible - 单个可折叠分区，包含标题
• Pagination - 页面导航，包含 totalPages 和 page

覆盖层

• Dialog - 模态对话框，包含标题、描述、openPath
• Drawer - 底部抽屉，包含标题、描述、openPath
• Tooltip - 悬停提示框，包含内容和文本
• Popover - 点击触发的弹出框，包含触发器和内容
• DropdownMenu - 下拉菜单，包含标签和 items 数组

内容

• Heading - 标题文本，支持级别（h1-h4）
• Text - 段落，支持变体（body、caption、muted、lead、code）
• Image - 图片，包含 alt、width、height
• Avatar - 用户头像，包含 src、name、size
• Badge - 状态徽标，包含文本和变体（default、secondary、destructive、outline）
• Alert - 提示横幅，包含标题、消息和类型（success、warning、info、error）
• Carousel - 可滚动轮播，包含 items 数组
• Table - 数据表格，包含列（string[]）和行（string[][]）

反馈

• Progress - 进度条，包含 value、max、label
• Skeleton - 加载占位符，包含 width、height、rounded
• Spinner - 加载旋转图标，包含 size 和 label

输入

• Button - 按钮，包含 label、variant（primary、secondary、danger）和 disabled
• Link - 锚点链接，包含 label 和 href
• Input - 文本输入框，包含 label、name、type、placeholder、value、checks
• Textarea - 多行输入框，包含 label、name、placeholder、rows、value、checks
• Select - 下拉选择框，包含 label、name、options（string[]）、value、checks
• Checkbox - 复选框，包含 label、name、checked、checks、validateOn
• Radio - 单选框组，包含 label、name、options（string[]）、value、checks、validateOn
• Switch - 开关，包含 label、name、checked、checks、validateOn
• Slider - 范围滑块，包含 label、min、max、step、value
• Toggle - 切换按钮，包含 label、pressed、variant
• ToggleGroup - 切换按钮组，包含 items、type、value
• ButtonGroup - 按钮组，包含 buttons 数组和 selected

校验时机（validateOn）

所有表单组件都支持 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