json-render-shadcn by vercel-labs/json-render
npx skills add https://github.com/vercel-labs/json-render --skill json-render-shadcn为 json-render 预构建的 shadcn/ui 组件定义与实现。提供基于 Radix UI + Tailwind CSS 构建的 36 个组件。
| 入口点 | 导出内容 | 用途 |
|---|---|---|
@json-render/shadcn/catalog | shadcnComponentDefinitions | 目录模式(无 React 依赖,服务器端安全) |
@json-render/shadcn | shadcnComponents | React 实现 |
从标准定义中选取你需要的组件。不要展开所有定义——请明确选择你的应用所使用的部分:
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { defineRegistry } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";
// 目录:选取定义
const catalog = defineCatalog(schema, {
components: {
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
Heading: shadcnComponentDefinitions.Heading,
Button: shadcnComponentDefinitions.Button,
Input: shadcnComponentDefinitions.Input,
},
actions: {},
});
// 注册表:选取匹配的实现
const { registry } = defineRegistry(catalog, {
components: {
Card: shadcnComponents.Card,
Stack: shadcnComponents.Stack,
Heading: shadcnComponents.Heading,
Button: shadcnComponents.Button,
Input: shadcnComponents.Input,
},
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
状态操作(
setState、pushState、removeState)已内置在 React 模式中,并由ActionProvider自动处理。无需声明它们。
在标准组件旁添加自定义组件:
const catalog = defineCatalog(schema, {
components: {
// 标准组件
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
// 自定义组件
Metric: {
props: z.object({
label: z.string(),
value: z.string(),
trend: z.enum(["up", "down", "neutral"]).nullable(),
}),
description: "KPI 指标显示",
},
},
actions: {},
});
const { registry } = defineRegistry(catalog, {
components: {
Card: shadcnComponents.Card,
Stack: shadcnComponents.Stack,
Metric: ({ props }) => <div>{props.label}: {props.value}</div>,
},
});
@json-render/react)这些已内置在 React 模式中,并由 ActionProvider 自动处理。它们会出现在提示中,无需在目录中声明。
{ statePath, value }){ statePath, value, clearStatePath? }){ statePath, index }){ valid, errors } 写入状态({ statePath? })validateOn)所有表单组件都支持 validateOn 来控制验证运行的时机:
"change" — 每次输入变化时验证(Select、Checkbox、Radio、Switch 的默认值)"blur" — 字段失去焦点时验证(Input、Textarea 的默认值)"submit" — 仅在表单提交时验证/catalog 入口点没有 React 依赖——请将其用于服务器端提示生成components/ui/ 目录下的)checks(类型+消息对)和用于控制时机的 validateOnchange/submit/focus/blur;按钮触发 press;选择器触发 change/select每周安装量
151
代码仓库
GitHub 星标数
13.4K
首次出现
2026年2月17日
安全审计
安装于
codex145
gemini-cli143
opencode143
github-copilot141
kimi-cli136
amp136
Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.
| Entry Point | Exports | Use For |
|---|---|---|
@json-render/shadcn/catalog | shadcnComponentDefinitions | Catalog schemas (no React dependency, safe for server) |
@json-render/shadcn | shadcnComponents | React implementations |
Pick the components you need from the standard definitions. Do not spread all definitions -- explicitly select what your app uses:
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { defineRegistry } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";
// 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,
},
});
State actions (
setState,pushState,removeState) are built into the React schema and handled byActionProviderautomatically. No need to declare them.
Add custom components alongside standard ones:
const catalog = defineCatalog(schema, {
components: {
// Standard
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
// Custom
Metric: {
props: z.object({
label: z.string(),
value: z.string(),
trend: z.enum(["up", "down", "neutral"]).nullable(),
}),
description: "KPI metric display",
},
},
actions: {},
});
const { registry } = defineRegistry(catalog, {
components: {
Card: shadcnComponents.Card,
Stack: shadcnComponents.Stack,
Metric: ({ props }) => <div>{props.label}: {props.value}</div>,
},
});
@json-render/react)These are built into the React schema and handled by ActionProvider automatically. They appear in prompts without needing to be declared in the catalog.
{ statePath, value }){ statePath, value, clearStatePath? }){ statePath, index }){ valid, errors } to state ({ statePath? })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/catalog entry point has no React dependency -- use it for server-side prompt generationcomponents/ui/)checks for validation (type + message pairs) and validateOn for timingchange/submit/focus/blur; buttons emit press; selects emit change/Weekly Installs
151
Repository
GitHub Stars
13.4K
First Seen
Feb 17, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex145
gemini-cli143
opencode143
github-copilot141
kimi-cli136
amp136
Figma 设计系统构建技能 - 自动化生成专业级UI组件库与设计令牌
595 周安装
select