用途:为理解和使用 shadcn/ui 建立基础心智模型。官方定位是“代码分发平台”:通过 CLI 把 React 组件源码复制进项目,使用者直接拥有源码并自行修改,它不是运行时依赖、不是 npm 包、也不是传统组件库。官方标语为“This is not a component library. It is how you build your component library.”
主要能力与用法:组件一律用 pnpm dlx shadcn@latest add <component>(或 npx、bunx、yarn dlx)安装,禁止 npm install shadcn-ui;添加后从本地别名导入,如 @/components/ui/button,而不是从外部模块导入。重新安装前先用 shadcn add <component> --diff 预览,再决定是否 --overwrite,避免覆盖自定义代码。升级靠重新运行 shadcn add 并手动合并,npm update 不会升级组件。
栈组成:CLI 复制文件后,组件依赖 radix-ui、class-variance-authority、tailwind-merge、clsx、tailwindcss、lucide-react 等普通 npm 依赖;CLI 自身也是 npm 包(shadcn,2026 年为 4.7.0),仅在安装时运行。
适用场景:项目使用 React 且采用或愿意采用 Tailwind CSS,团队希望拥有并深度定制组件源码、接受手动合并升级,尤其适合 AI 辅助开发,因为源码在本地可被模型直接读取和修改。若更看重快速出屏与自动升级,宜选 MUI、Chakra、Mantine、Ant Design 等传统库。
限制:仅支持 React;与 Tailwind 强耦合;升级需手动合并,无 semver 自动推进;组件为“常青”模式,需自行在仓库中锁定可用版本并固定底层依赖;初始化时配置的 style、baseColor 等不可更改。本资料未提供具体价格或收费信息。
官方五大支柱:Open Code(可在本地修改)、Composition(统一可组合接口)、Distribution(扁平文件与命令行分发)、Beautiful Defaults(开箱即用的默认样式)、AI-Ready(开放源码便于 LLM 理解改进)。