SuperAPI AI 工具集

json-render-shadcn

通用与其它

查看项目

更新于 10-15 23:41

技能介绍

用途:@json-render/shadcn 是 json-render 的预构建 shadcn/ui 组件包,提供 36 个基于 Radix UI 与 Tailwind CSS 的组件定义与实现,用于在 json-render 目录(catalog)中挑选标准 UI 组件并构建 Web 界面。

两个入口:@json-render/shadcn/catalog 导出 shadcnComponentDefinitions,仅含目录 schema,无 React 依赖,可用于服务端生成提示;@json-render/shadcn 导出 shadcnComponents,为 React 实现。

用法:从标准定义中显式挑选所需组件,不要展开全部定义。用 defineCatalog 组装 catalog,用 defineRegistry 组装匹配的 registry,两者组件需一一对应。setState、pushState、removeState 等状态动作内置于 React schema,由 ActionProvider 自动处理,无需在 catalog 中声明。可在标准组件旁添加自定义组件,自定义项需提供 props(zod)与 description。

组件范围:布局(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)。

内置动作:setState、pushState、removeState、validateForm。表单组件支持 validateOn(change、blur、submit)控制校验时机,并支持 checks(类型与消息对)。输入发出 change/submit/focus/blur,按钮发出 press,选择器发出 change/select。

限制:组件使用 Tailwind CSS 类,应用需配置 Tailwind;组件实现使用打包的 shadcn/ui 原语,而非应用自身的 components/ui/。安装命令、版本与收费信息暂未提供。