Back to Details

shadcn-svelte

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

@json-render/shadcn-svelte

@json-render/shadcn-svelte

Pre-built shadcn-svelte component definitions and implementations for json-render. Provides 36 components built on Svelte 5 + Tailwind CSS.
为json-render预构建的shadcn-svelte组件定义与实现，提供基于Svelte 5 + Tailwind CSS构建的36个组件。

Two Entry Points

两个入口点

Entry PointExportsUse For
@json-render/shadcn-svelte/catalog
shadcnComponentDefinitions
Catalog schemas (no Svelte dependency, safe for server)
@json-render/shadcn-svelte
shadcnComponents
, 
shadcnComponentDefinitions
Svelte implementations + catalog schemas
入口点导出内容适用场景
@json-render/shadcn-svelte/catalog
shadcnComponentDefinitions
目录schema（无Svelte依赖，服务端可安全使用）
@json-render/shadcn-svelte
shadcnComponents
, 
shadcnComponentDefinitions
Svelte实现 + 目录schema

Usage Pattern

使用模式

Pick the components you need from the standard definitions. Do not spread all definitions -- explicitly select what your app uses:
typescript
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,
  },
});
Then render in your Svelte component:
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>
从标准定义中选取你需要的组件。不要全量引入所有定义——显式选择你的应用实际使用的内容：
typescript
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组件中渲染：
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>

Available Components

可用组件

Layout

布局

  • Card - Container with optional title, description, maxWidth, centered
  • Stack - Flex container with direction, gap, align, justify
  • Grid - Grid layout with columns (number) and gap
  • Separator - Visual divider with orientation
  • Card - 容器组件，支持可选标题、描述、最大宽度、居中配置
  • Stack - Flex弹性容器，支持方向、间距、对齐、排布配置
  • Grid - Grid网格布局，支持列数和间距配置
  • Separator - 可视化分割线，支持方向配置

Navigation

导航

  • Tabs - Tabbed navigation with tabs array, defaultValue, value
  • Accordion - Collapsible sections with items array and type (single/multiple)
  • Collapsible - Single collapsible section with title
  • Pagination - Page navigation with totalPages and page
  • Tabs - 标签页导航，支持标签数组、默认值、当前值配置
  • Accordion - 折叠面板，支持面板数组和类型（单选/多选）配置
  • Collapsible - 单个可折叠区块，支持标题配置
  • Pagination - 分页导航，支持总页数和当前页配置

Overlay

浮层

  • Dialog - Modal dialog with title, description, openPath
  • Drawer - Bottom drawer with title, description, openPath
  • Tooltip - Hover tooltip with content and text
  • Popover - Click-triggered popover with trigger and content
  • DropdownMenu - Dropdown with label and items array
  • Dialog - 模态弹窗，支持标题、描述、打开路径配置
  • Drawer - 底部抽屉，支持标题、描述、打开路径配置
  • Tooltip - hover触发的文字提示，支持内容和文本配置
  • Popover - 点击触发的弹出框，支持触发器和内容配置
  • DropdownMenu - 下拉菜单，支持标签和菜单项数组配置

Content

内容

  • Heading - Heading text with level (h1-h4)
  • Text - Paragraph with variant (body, caption, muted, lead, code)
  • Image - Image with alt, width, height
  • Avatar - User avatar with src, name, size
  • Badge - Status badge with text and variant (default, secondary, destructive, outline)
  • Alert - Alert banner with title, message, type (success, warning, info, error)
  • Carousel - Scrollable carousel with items array
  • Table - Data table with columns (string[]) and rows (string[][])
  • Heading - 标题文本，支持层级（h1-h4）配置
  • Text - 段落文本，支持变体（正文、说明文字、弱化文本、引导文本、代码）配置
  • Image - 图片，支持alt文本、宽度、高度配置
  • Avatar - 用户头像，支持资源地址、名称、尺寸配置
  • Badge - 状态徽章，支持文本和变体（默认、次要、危险、描边）配置
  • Alert - 警告横幅，支持标题、消息、类型（成功、警告、信息、错误）配置
  • Carousel - 可滚动轮播图，支持轮播项数组配置
  • Table - 数据表格，支持列（字符串数组）和行（二维字符串数组）配置

Feedback

反馈

  • Progress - Progress bar with value, max, label
  • Skeleton - Loading placeholder with width, height, rounded
  • Spinner - Loading spinner with size and label
  • Progress - 进度条，支持当前值、最大值、标签配置
  • Skeleton - 加载占位骨架屏，支持宽度、高度、圆角配置
  • Spinner - 加载指示器，支持尺寸和标签配置

Input

输入

  • Button - Button with label, variant (primary, secondary, danger), disabled
  • Link - Anchor link with label and href
  • Input - Text input with label, name, type, placeholder, value, checks
  • Textarea - Multi-line input with label, name, placeholder, rows, value, checks
  • Select - Dropdown select with label, name, options (string[]), value, checks
  • Checkbox - Checkbox with label, name, checked, checks, validateOn
  • Radio - Radio group with label, name, options (string[]), value, checks, validateOn
  • Switch - Toggle switch with label, name, checked, checks, validateOn
  • Slider - Range slider with label, min, max, step, value
  • Toggle - Toggle button with label, pressed, variant
  • ToggleGroup - Group of toggles with items, type, value
  • ButtonGroup - Button group with buttons array and selected
  • Button - 按钮，支持标签、变体（主要、次要、危险）、禁用状态配置
  • Link - 锚点链接，支持标签和跳转地址配置
  • Input - 文本输入框，支持标签、字段名、类型、占位符、值、校验规则配置
  • Textarea - 多行输入框，支持标签、字段名、占位符、行数、值、校验规则配置
  • Select - 下拉选择器，支持标签、字段名、选项（字符串数组）、值、校验规则配置
  • Checkbox - 复选框，支持标签、字段名、选中状态、校验规则、校验触发时机配置
  • Radio - 单选框组，支持标签、字段名、选项（字符串数组）、值、校验规则、校验触发时机配置
  • Switch - 开关，支持标签、字段名、选中状态、校验规则、校验触发时机配置
  • Slider - 滑块，支持标签、最小值、最大值、步长、值配置
  • Toggle - 切换按钮，支持标签、按下状态、变体配置
  • ToggleGroup - 切换按钮组，支持选项、类型、值配置
  • ButtonGroup - 按钮组，支持按钮数组、选中状态配置

Validation Timing (
validateOn
)

校验触发时机（
validateOn
）

All form components support 
validateOn
to control when validation runs:
  • "change"
    -- validate on every input change (default for Select, Checkbox, Radio, Switch)
  • "blur"
    -- validate when field loses focus (default for Input, Textarea)
  • "submit"
    -- validate only on form submission
所有表单组件都支持
validateOn
参数来控制校验的触发时机：
  • "change"
    -- 每次输入变更时触发校验（Select、Checkbox、Radio、Switch的默认配置）
  • "blur"
    -- 字段失去焦点时触发校验（Input、Textarea的默认配置）
  • "submit"
    -- 仅在表单提交时触发校验

Important Notes

重要说明

  • The 
    /catalog
    entry point has no Svelte dependency -- use it for server-side prompt generation
  • Components use Tailwind CSS classes -- your app must have Tailwind configured
  • Component implementations use bundled shadcn-svelte primitives (not your app's 
    $lib/components/ui/
    )
  • All form inputs support 
    checks
    for validation (type + message pairs) and 
    validateOn
    for timing
  • Events: inputs emit 
    change
    /
    submit
    /
    focus
    /
    blur
    ; buttons emit 
    press
    ; selects emit 
    change
    /
    select
  • /catalog
    入口点无Svelte依赖——可用于服务端提示生成场景
  • 组件使用Tailwind CSS类名——你的应用必须已完成Tailwind配置
  • 组件实现使用打包内置的shadcn-svelte基础组件（而非你应用
    $lib/components/ui/
    路径下的自定义组件）
  • 所有表单输入组件都支持
    checks
    参数用于配置校验规则（类型+消息对），以及
    validateOn
    参数配置校验触发时机
  • 事件：输入组件会触发
    change
    /
    submit
    /
    focus
    /
    blur
    事件；按钮会触发
    press
    事件；选择器会触发
    change
    /
    select
    事件