shadcn/ui

一套精美设计的React组件集合，提供可复制粘贴的源码而非npm包，让你从基础组件开始构建自己的设计系统，同时保持完全的控制权和定制能力。

核心定位与独特模式

shadcn/ui 不是传统的组件库——它不发布npm包，而是通过CLI将组件源码直接复制到你的项目中。这意味着你拥有每个组件的完整控制权，可以任意修改样式和逻辑，而不受库更新的约束。所有组件基于Radix UI（或可选的React Aria）构建，内置无障碍支持。

• Copy-paste模式: 运行 `npx shadcn@latest add [组件名]` 将源码下载到项目，而非作为依赖引入
• 双基础可选: 2026年7月起，React Aria成为一等公民，与Radix UI并列可选组件基础
• 120k GitHub星标: 截至材料时间，仓库获得超过12万星标
• 开源开放: 源码托管于GitHub，由shadcn在Vercel维护

组件生态与扩展能力

官方提供60+组件，涵盖从基础按钮到复杂的数据表格、图表、侧边栏等。此外，社区通过Registry机制贡献自定义组件和区块，无需额外配置即可通过CLI安装。

• 官方组件库: 包括Accordion、Alert Dialog、Calendar、Carousel、Chart、Data Table、Sidebar、Toast等60+组件
• 社区Registry: 第三方开发者维护的组件目录，通过 `npx shadcn add @registry/组件` 安装
• Blocks与Charts: 提供预构建的UI区块（如仪表盘、聊天界面）和图表组件
• 新增组件: 2026年7月新增Toast（支持操作、状态类型、Promise、堆叠、滑动关闭）和Attachment、Bubble、Marker、Message、Message Scroller

安装与框架支持

支持多种主流框架和构建工具，提供可视化预设工具和CLI两种初始化方式。

• shadcn/create: 可视化构建预设，生成框架特定的安装命令，支持Next.js、Vite、Laravel、React Router、Astro、TanStack Start
• CLI脚手架: `pnpm dlx shadcn@latest init -t [framework]` 直接创建项目，支持next、vite、start、react-router、astro模板
• 现有项目集成: 每个框架指南包含手动添加步骤，Laravel需先 `laravel new` 再运行 `npx shadcn@latest init`
• 依赖管理: 自动处理组件依赖、注册表解析、样式和组件安装

主题与样式系统

提供8种内置样式主题（Vega、Nova、Maia、Lyra、Mira、Luma、Rhea、Sera），支持深色模式，并通过CSS变量实现全局主题定制。

• 八种样式: Vega、Nova、Maia、Lyra、Mira、Luma、Rhea、Sera，可在CLI或shadcn/create中选择
• 深色模式: 内置支持，通过Theming文档配置
• CSS变量驱动: 主题通过 `components.json` 和CSS变量管理，易于全局覆盖
• Typeset排版: 提供排版组件和样式预设

企业级信任与部署

被OpenAI、Sonos、Adobe等公司采用，推荐部署于Vercel平台。

• 信任客户: OpenAI、Sonos、Adobe等企业使用
• Vercel部署: 官方推荐部署平台，提供工具和基础设施
• MCP Server: 提供shadcn MCP Server，支持通过Model Context Protocol与AI工具集成

常见问题

Q1：shadcn/ui 和传统组件库（如Ant Design）有什么区别？

A1：大型区别是分发模式：shadcn/ui 不发布npm包，而是通过CLI将组件源码复制到你的项目中，你拥有完整控制权，可以任意修改。而传统组件库作为依赖安装，升级和定制受限于库的API。

Q2：shadcn/ui 支持哪些React框架？

A2：官方支持Next.js、Vite、Laravel、React Router、Astro和TanStack Start。通过CLI的 `-t` 参数可选择对应模板，现有项目也可按框架指南手动集成。

Q3：如何在shadcn/ui中使用React Aria替代Radix UI？

A3：2026年7月起，React Aria成为一等公民。在shadcn/create中选择React Aria基础，或使用CLI初始化时添加 `--base aria` 参数。CLI会自动处理依赖、注册表解析、样式和组件安装，并输出基于React Aria的组件代码。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。