SuperAPI AI 工具集

shadcn-ui

通用与其它

查看项目

更新于 10-15 21:09

技能介绍

用途:为使用 shadcn/ui 构建前端应用的开发者提供集成与定制指导。shadcn/ui 不是传统组件库,而是把组件源码复制进项目,因此组件归项目所有、可自由修改、无版本锁定、无运行时库体积。

主要能力:通过 MCP 工具浏览组件目录与注册表,包括 list_components、get_component_metadata、get_component_demo、get_component、get_project_registries、list_items_in_registries、view_items_in_registries、search_items_in_registries;支持区块(blocks)的列举与获取,如 list_blocks、get_block,覆盖 calendar、dashboard、login、sidebar、products 等类别。

使用方式:新项目运行 npx shadcn@latest create,已有项目运行 npx shadcn@latest init 生成 components.json;添加组件运行 npx shadcn@latest add [component-name],也可用 get_component 取源码后手动放入 components/ui/ 并自行安装依赖。配置项包括 style、baseColor、cssVariables、Tailwind 路径、别名、rsc、rtl。依赖要求 React 18+、Tailwind CSS 3.0+、Radix UI 或 Base UI、class-variance-authority、clsx 与 tailwind-merge。

定制与结构:组件位于 components/ui/,自定义组合组件放在 components/ 下;用 cn() 合并类名,用 cva 定义变体,通过 Tailwind 配置与 globals.css 中的 CSS 变量做主题与暗色模式。

适用场景:需要高可定制、可访问的 React 界面,如表单、对话框、数据表格、仪表盘与认证流程。

限制:需自行维护复制进项目的组件代码;定制时须保留 ARIA 属性、键盘处理与焦点管理;版本兼容与破坏性变更需查阅文档;资料未提供具体收费与价格信息。