SuperAPI AI 工具集

shadcn-ui

通用与其它

查看项目

更新于 10-15 23:59

技能介绍

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

主要能力:通过 MCP 工具浏览组件目录与注册表,如 list_components、get_component_metadata、get_component_demo、get_component、list_blocks、get_block;支持自定义注册表的 get_project_registries、list_items_in_registries、view_items_in_registries、search_items_in_registries。

使用方式:新项目运行 npx shadcn@latest create,已有项目运行 npx shadcn@latest init 生成 components.json;添加组件用 npx shadcn@latest add [component-name],也可手动取源码放入 components/ui/。依赖包括 React 18+、Tailwind CSS 3.0+、Radix UI 或 Base UI、class-variance-authority、clsx 与 tailwind-merge。组件通过 cn() 合并类名,主题在 Tailwind 配置与 globals.css 的 CSS 变量中定制,变体用 cva 定义,扩展组件应放在 components/ 而非 components/ui/。

适用场景:表单、对话框、数据表格、仪表盘、登录流程、侧边栏等界面开发。

限制:需保持无障碍属性与键盘支持;提交前建议运行 tsc --noEmit、lint 与无障碍检查;版本兼容与具体配置细节以官方文档为准,资料未提供价格与平台信息。