shadcnui

严格来说shadcn-ui 不是组件库，而是UI库，是一套「可拷贝、可修改、可完全掌控」的 UI 组件源码方案。

• 定位：基于 Radix/UI ，再加 Tailwind CSS 预设样式、可变体系统的组件集合。

• 核心特色：

  • 不是传统 npm 包，而是通过 CLI 将组件源码复制到项目中（Copy-Paste/Own code）。你拥有组件源代码，可随意修改。
  • 默认带可访问性逻辑（继承 Radix）、Tailwind 风格视觉、预设变体。

• 适合：想快速上手、又要自定义 UI；Tailwind 团队；中型后台/产品页；需要对组件有完全控制权的团队

• shadcn-ui = Radix UI + Tailwind

  • 基于 Radix（行为）
  • 用 Tailwind（样式）
  • 用 cva 管理 variant
  • 用 CSS 变量管理主题

统一radix-ui 聚合包

• ui 目录建议不要依赖 @radix-ui/react-*，统一改成了 radix-ui 聚合包导入
  • 依赖 @radix-ui/react-* 是旧版本写法的方式，目前已不推荐

导入统一到 radix-ui 聚合包，主要有这些优势：

• 依赖管理更简单：只维护一个 radix-ui，不用每加一个组件就装一个 @radix-ui/react-* 包。
• 版本一致性更好：避免 react-slot、react-separator 等子包版本不一致导致的类型或行为差异。
• 升级成本更低：后续升级只需要关注一个包版本
• 代码风格更统一：导入来源一致，团队代码更易读，也更利于 lint/审查。
• 扩展速度更快：后面继续加 shadcn/ui 组件时，不需要反复补装多个 Radix 子包
• 工程维护角度，统一到 radix-ui 通常更省心

安装使用

bash

 # 直接快速初始化shadcn项目
 pnpm dlx shadcn@latest init
 # 安装组件
 pnpm dlx shadcn@latest add button