SuperAPI AI 工具集

shadcn

前端与建站

查看项目

更新于 10-16 03:11

技能介绍

用途:shadcn/ui 用于构建 UI、组件与设计系统,组件通过 CLI 以源码形式加入用户项目,而非作为依赖包引入。

主要能力:提供组件搜索、添加、文档查询、查看预览与更新合并等能力,并注入项目上下文(别名、是否 RSC、Tailwind 版本、样式、base 库、图标库、路径、框架、包管理器等),用于指导正确用法。

使用方式:所有 CLI 命令需按项目包管理器选择运行器:npx shadcn@latest、pnpm dlx shadcn@latest 或 bunx --bun shadcn@latest。常用命令包括:npx shadcn@latest info --json 查看项目配置与已安装组件;npx shadcn@latest docs <component> 获取文档与示例 URL;npx shadcn@latest search 搜索注册表;npx shadcn@latest add 添加组件,可配 --dry-run 与 --diff 预览;npx shadcn@latest init 初始化,支持 preset 与 template;npx shadcn@latest view 浏览未安装的注册表项。

关键规范:优先复用已有组件,用组合而非重写;使用内置变体与语义色(如 bg-primary、text-muted-foreground),不用原始色值;间距用 flex 加 gap-,不用 space-x/y-;尺寸相等用 size-*;条件类用 cn();表单用 FieldGroup + Field,校验用 data-invalid 与 aria-invalid;条目须置于对应 Group;Dialog、Sheet、Drawer 必须有 Title;图标以对象传入并用 data-icon,不在组件内加尺寸类。

适用场景:需要以源码方式维护组件、构建统一设计系统、快速组合页面(如设置页、仪表盘)的前端项目。

限制与注意:不得手动解码或抓取 preset 码,直接传参;不得从 GitHub 手动抓取原始文件更新组件;未指定注册表时须先询问,不得代为默认;使用 --overwrite 需用户明确同意;添加第三方注册表组件后需检查并修正硬编码导入路径与图标库;RSC 为 true 时使用状态或浏览器 API 的组件需加 "use client"。官方收费、价格等信息资料未提供。