SuperAPI AI 工具集

nextjs-shadcn

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:在 Next.js App Router 项目中使用 shadcn/ui 构建无障碍、可定制的 UI 组件,包括表单(输入框、选择器、复选框)、对话框、抽屉、数据表格、导航菜单、命令面板与 Toast 通知。

主要能力:组件基于 Base UI(默认)、Radix UI 或 React Aria 原语,使用 Tailwind CSS v4 样式;支持 TanStack Form、Server Components(rsc: true)、Lucide 图标;提供 MCP 注册表工具(mcp__shadcn__search_items_in_registries、view_items_in_registries、get_item_examples_from_registries、get_add_command_for_items)用于发现组件。

使用方式:写组件前先读取 components.json 判断底层库(base-* 为 Base UI,radix-* / new-york 为 Radix,aria-* 为 React Aria),不得混用。组件必须用 bunx --bun shadcn@latest add 安装到 @/modules/cores/shadcn/components/ui/,禁止手写。组合方式随底层库变化:Base UI 用 render={<Button />},Radix 用 asChild。表单仅用 TanStack Form,错误通过 Field 的 data-invalid 与控件的 aria-invalid 传递。可运行 bunx --bun shadcn@latest mcp init --client claude 接入 MCP;CLI 辅助命令有 shadcn info 与 shadcn docs <component> -b <base|radix|aria>。

适用场景:Next.js App Router 应用的表单、覆盖层、数据展示、导航与反馈组件开发。

限制:仅适用于 Next.js App Router,纯 React/Vite 应用应改用 react-shadcn;不同底层库的 API 差异需按文档转换;资料未提供收费、价格与效果信息。