shadcn by vercel-labs/json-render
npx skills add https://github.com/vercel-labs/json-render --skill 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每周安装量
343
代码仓库
GitHub 星标数
13.3K
首次出现
2026年3月7日
安全审计
安装于
codex337
cursor335
kimi-cli334
gemini-cli334
github-copilot334
amp334
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
343
Repository
GitHub Stars
13.3K
First Seen
Mar 7, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex337
cursor335
kimi-cli334
gemini-cli334
github-copilot334
amp334
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
105,000 周安装
Kotlin测试模式指南:使用Kotest和MockK进行TDD测试与代码覆盖率
685 周安装
Micro-SaaS启动器:独立开发者快速验证想法、构建MVP和定价策略指南
529 周安装
nuqs Next.js 最佳实践:42条类型安全URL状态管理规则,提升开发效率与性能
511 周安装
Overlastic:支持React、Vue、Svelte的Promise模态框库,实现弹窗管理
507 周安装
AI回归测试解决方案:解决AI辅助开发的系统性盲点与代码审查缺陷
332 周安装
科学批判性思维指南:GRADE与Cochrane偏倚评估框架,提升研究质量
523 周安装
select