12 个库里，GitHub Star 最低的那一个——它某个子包每周被下载 1.83 亿次。
而 Star 排第四的那一个，最后一次提交代码是半年前。
两条都不是笔误。最近一份「2026 年 12 个最热门开源 UI 组件库」的清单流传得很广，主题也正是大家都在头疼的事：AI 写页面速度很快，但打开浏览器一看，还是那套渐变背景 + 圆角卡片 + 三个功能栏。
那份清单的思路是对的——与其让 AI 凭感觉发挥，不如先把按钮、表单、弹窗的规则统一起来。但它给的 12 个名字，我逐个拿去 GitHub 和 npm 查了一遍原始数据，发现两件事：
- 这 12 个库根本不在同一个层次上，并列成「12 选 1」本身就是错位的；
- Star 数是最不该用来做选型依据的指标。
先给数据，再说怎么选。
GitHub Star 数，2026-10-09 通过 API 逐个读取。第一名 shadcn/ui 12.5 万，最后一名 Radix UI 1.9 万——记住这个最后一名，后面它是主角。
一、先纠正一个概念：这 12 个库分四层，不是一排
这是整篇文章最重要的一张图。原文把 12 个库并列成一条清单，但它们实际是这样叠起来的：
同一个项目里，这四层是可以同时存在的，不是互斥选项。Radix 和 Headless UI 提供「行为」，shadcn/ui 和 React Bits 提供「可以复制走的源码」，其他几个提供「完整视觉体系」。
| 层次 | 它给你什么 | 库里有哪些 |
|---|---|---|
| 原语层 | 只给行为、键盘操作和无障碍，一点样式都没有 | Radix UI、Headless UI |
| 源码分发型 | 把组件源码直接复制进你的项目，代码归你 | shadcn/ui、React Bits |
| 完整设计体系 | 一整套视觉语言 + 组件 + 主题系统 | Ant Design、MUI、Chakra UI、Mantine、HeroUI、daisyUI、Fluent UI |
| 动效素材 | 背景、文字动效、光标特效这类视觉件 | React Bits（跨了这层） |
最直接的证据：排名第 1 的 shadcn/ui，就是建在排名第 12 的 Radix UI 上的。
shadcn/ui 的官方描述写得很清楚——基于 Radix UI + Tailwind CSS。它的弹窗、下拉菜单、气泡卡，底层用的都是 Radix 的无样式原语，shadcn 只是在上面套了一层 Tailwind 样式，然后把源码交给你。
所以「第 1 名」和「第 12 名」不是竞争对手，是父子关系。把父亲和儿子放在一张榜单里比较，怎么比都是错的。
同理，Headless UI 和 Radix 是一类东西（Tailwind 团队出品的无样式组件），React Bits 本质上是动效素材库而不是通用组件库——它的官网原话是 215+ 个「背景、文字动效、动画、创意 UI 组件」，装法也是复制源码。
你要做的第一件事不是选库，是确定自己需要哪一层。
二、Star 数会骗人，下载量不会
第二张图是我认为最有信息量的一张：
npm 周下载量，2026-10-09 读取。左侧是 Radix UI 的几个子包，右侧是其他库的主包。Radix 的 Star 在 12 个里垫底，下载量却高出一个数量级。
把两组数字放在一起看：
| 库 | GitHub Star | npm 周下载量 | 口径 |
|---|---|---|---|
| shadcn/ui | 125,202 | 11,586,795 | shadcn CLI |
| MUI | 99,155 | 10,064,674 | @mui/material |
| Headless UI | 28,772 | 7,306,087 | @headlessui/react |
| Ant Design | 99,729 | 3,621,749 | antd |
| Mantine | 31,817 | 2,742,440 | @mantine/core |
| Chakra UI | 40,679 | 1,590,714 | @chakra-ui/react |
| React Bootstrap | 22,602 | 1,290,628 | react-bootstrap |
| daisyUI | 42,563 | 1,036,506 | daisyui |
| HeroUI | 30,895 | 649,374 | @heroui/react |
| Fluent UI | 20,314 | 364,479 | @fluentui/react（v8） |
| Radix UI | 19,375 | 182,769,583 | @radix-ui/react-slot |
| Radix UI | 19,375 | 74,843,306 | @radix-ui/react-dialog |
为什么 Radix 的 Star 最低、下载最高？因为它不是给终端项目用的，是给别的库当地基用的。
@radix-ui/react-slot 那个 1.83 亿的数字尤其说明问题——这个包只提供一个能力：把样式转交给子元素（asChild 模式）。它是几乎所有 shadcn/ui 组件的必装依赖。你每次 npx shadcn add button，都会把它装进来。
这就分出了两类完全不同的指标：
| 指标 | 它衡量什么 | 谁在乎 |
|---|---|---|
| GitHub Star | 有多少人收藏了这个仓库 | 项目自己的知名度 |
| npm 下载量 | 有多少项目在依赖它 | 用它的人 |
Star 高说明「大家听说过你」，下载量高说明「大家在靠你撑着」。 你要选的是后者。
一个附带结论：MUI 的 Star 是 Radix 的 5 倍，但 @mui/material 的下载量只有 Radix 单个子包的 5% 。这不是说 MUI 不好——MUI 是一个完整体系，它的用户量本来就小于「地基型」的库。但如果你只看 Star 榜单，会误判谁在生态里的位置更硬。
三、三个和原文对不上的地方
查数据的过程中，有三处对不上，值得单独说，因为它们直接影响选型。
（1）说它「社区最活跃」，但它半年没提交过代码
那份清单开头写的是「GitHub 上热门、社区最活跃的 12 个开源 UI 组件库」。里面排第 9 的 Headless UI：
Headless UI 最近三个版本——v2.2.10 发布于 2026-04-07，再往前是 2025-09-25 和 2025-09-12，中间还断过一整年。仓库最后一次代码推送是 2026-04-13，距离今天（2026-10-09）整半年。
它依然是好东西（Tailwind 团队出品、无障碍做得扎实），但**「最活跃」这个标签配不上它**。选一个半年没动的库做长期项目的地基，你得先接受一件事：新需求基本靠自己。
（2）另一个「元老」，v3 停在一年前的 beta
React Bootstrap 的情况更明显：
| 项 | 状态 |
|---|---|
| npm 上的正式版 | 2.10.10（发布于 2025-05-11） |
| 最新的 v3 版本 | v3.0.0-beta.5（发布于 2025-09-22） |
| 距今 | v3 已经一年没有新进展 |
仓库里还有提交（文档、维护），但正式版本一年半没动、v3 卡在 beta 一年。它仍然适合「团队已经熟练 Bootstrap、要快速上线」的场景，但别再期待它跟上前端这几年的节奏了。
（3）「开源」这两个字，有一个不是你说的那个意思
排第 4 的 React Bits，Star 4.8 万、涨得很快，官网也确实写着开源。但它的许可证是这样的：
MIT + Commons Clause License Condition v1.0。GitHub 因此无法识别为标准协议，把它标成了 NOASSERTION。
Commons Clause 那段的原文是关键：
你可以把组件用在任何应用、网站或产品里，包括商业用途，前提是你不得销售、再授权或再分发这些组件本身——无论是单独的、打包的，还是移植后的版本。
翻译成可执行的话：
- ✅ 用在你的项目里、客户项目里、商业产品里——都行
- ✅ 改代码、改样式、改成自己的版本——行
- ❌ 打包成一套模板去卖、把它移植成 Vue 版再发布、把组件单独抽出来做成自己的库——不行
Commons Clause 不是 OSI 认可的开源协议，严格意义上 React Bits 属于「源码可得的商业许可」。对绝大多数开发者没有任何影响（谁会把动效组件单独拿去卖呢），但如果你在做模板站、组件市场这类生意，这条线必须先看清楚。
顺带一个查数据时踩到的坑：npm 上确实有个叫
react-bits的包，但它是 2017 年的老包（周下载 2,342），和 React Bits 没有任何关系。React Bits 走的是源码分发，官网原话是 "install as source you own"。查它的数据不能拿那个 npm 包凑数。
四、12 个库逐个过一遍（带真实数据）
先看一眼「第一印象」。同样是组件库官网，四个库的第一眼完全是四种设计语言：
shadcn/ui 官网。整站只有黑白灰——这不是偷懒，是它的产品主张：颜色不该由组件库决定，该由你的设计系统决定。注意右上角的 125k 徽章，和本文第一张图的 Star 数对得上。
Ant Design 官网。中后台的标准长相：规整、克制、信息密度高。中间三张卡片（Pro V6、CLI、6.0）说明它现在主推「AI 友好」，右上角版本号 6.6.5。
Radix 官网。本期截图里视觉最讲究的一张——衬线大标题配粉紫渐变背景。但注意它的标语写的不是「好看」，而是 "optimized for fast development, easy maintenance, and accessibility"：无障碍直接写进了第一句话。
daisyUI 官网。字最大、元素最少的一张，连官网都在演示「轻」：一条安装命令、一句标语、一行下载量。它甚至把周下载数直接摆在首屏当卖点——组件库的竞争已经从「谁功能多」转向「谁用起来快」了。
下面按层次分组，每组里的数据都是 2026-10-09 现查的。
第一层：原语层（只给行为，不给样式）
Radix UI — Star 19,375｜@radix-ui/react-*｜MIT
无样式原语的事实标准。「无样式」的意思是：它保证键盘操作、焦点管理、屏幕阅读器播报都正确，但外观完全由你决定。它的社区活跃度极高（每天都有推送）。
适合：要自建设计系统、对无障碍有硬要求的团队。 不适合：想今天就把页面做出来的人——它一个按钮的样式都不会给你。
Headless UI — Star 28,772｜@headlessui/react｜MIT｜半年无提交
Tailwind 团队出品，定位和 Radix 类似但组件少得多（核心是 Dialog、Menu、Listbox、Combobox、Switch 这几个）。API 极简，和 Tailwind 配合最顺。
适合：只缺几个交互组件、其余自己写的项目。 注意：先接受它「基本停更」这个前提。
第二层：源码分发型（代码复制进你的项目）
shadcn/ui — Star 125,202（12 个里第一）｜CLI npx shadcn@latest｜MIT
它不通过 npm 分发组件——组件是复制到你项目里的代码。这是它最核心的设计（也是它 Star 爆炸的原因）：没有黑盒，没有版本升级，你想改哪个文件就改哪个文件。底层是 Radix + Tailwind。
适合：新项目、AI 辅助开发、想完全掌控代码的人。 代价：组件是你自己的了，上游的 bug 修复也不会自动流到你这里。
React Bits — Star 48,774｜源码分发｜MIT + Commons Clause
215+ 个动效件：背景（Aurora、Dot Field、Ballpit）、文字动效、光标特效、微交互。提供 JS/TS × CSS/Tailwind 四种变体，每个组件都是复制走。
适合：营销页、产品展示页，需要「一眼看上去不一样」的地方。 注意：它是素材库不是通用组件库——别指望拿它做后台管理系统的表格和表单。
第三层：完整设计体系（自带视觉语言）
Ant Design — Star 99,729｜antd｜v6.6.5｜MIT
中文文档和社区是它最大的护城河，表单、表格、数据展示能力依然是顶配。国内中后台的默认答案。
适合：中后台系统、数据密集型应用。
MUI — Star 99,155｜@mui/material｜v9.5.0｜MIT
Material Design 的官方 React 实现，组件数和生态最完整。注意 v9 是大版本，升级时留意迁移指南。
适合：需要完整设计体系、国际化支持的项目。
Chakra UI — Star 40,679｜@chakra-ui/react｜v3.37.0｜MIT
API 设计最舒服的一个：用 props 写样式，可读性好，无障碍做得扎实。v3 是重写版。
适合：SaaS 产品、重视代码可读性的团队。
Mantine — Star 31,817｜@mantine/core｜v9.7.1｜MIT
「一个库解决大部分需求」的思路：组件 + Hooks + 表单 + 通知 + 日期选择全都自带，TypeScript 类型一流。
适合：不想装一堆小库、希望开箱即用的团队。
HeroUI — Star 30,895｜@heroui/react｜v3.2.6｜Apache-2.0
原 NextUI，基于 React Aria + Tailwind，默认样式就很好看，动画顺滑。
适合：想要现代美观、又不想写太多样式的项目。
daisyUI — Star 42,563｜daisyui｜v5.7.47｜MIT
不是组件库，是 Tailwind 的插件：装完直接用 class 出组件，还带一套主题切换系统。
适合：已用 Tailwind、想快速出效果、需要换肤的项目。
Fluent UI — Star 20,314｜@fluentui/react-components｜NOASSERTION（实为 MIT）
微软设计语言的实现，和 Office/Teams 生态一致度高。
注意一个坑：npm 上 @fluentui/react 还停在 v8（8.125.8），新项目应该用 v9 的包名 @fluentui/react-components。这两个不是同一个东西。
第四层：元老们
React Bootstrap — Star 22,602｜react-bootstrap｜v2.10.10（2025-05） ，v3 卡在 beta
Bootstrap 的 React 版。稳定性没得挑，迁移成本极低。
适合：团队本来就熟 Bootstrap、要快速上线的项目。 注意：正式版本一年半没更新，v3 一年没进展。
五、怎么选：按层次选，不要按排名选
| 你的处境 | 该动的层 | 具体选 |
|---|---|---|
| 有设计师 / 要自建设计系统 | 原语层 | Radix UI（组件多）或 Headless UI（够用就行） |
| 新项目、想完全掌控代码 | 源码分发 | shadcn/ui |
| 中后台、要立刻出活 | 完整体系 | Ant Design（中文生态）或 MUI（国际化） |
| 已用 Tailwind、要快 | 完整体系（插件） | daisyUI |
| 一个库解决大部分需求 | 完整体系 | Mantine |
| 默认样式就要好看 | 完整体系 | HeroUI 或 Chakra UI |
| 落地页要「有 wow 感」 | 动效素材 | React Bits（叠在任意完整体系之上） |
| 老项目、团队熟 Bootstrap | 完整体系 | React Bootstrap（接受它停更） |
一条原则：动效素材可以叠在完整体系上面，原语层和完整体系不要混用。 你在一个项目里同时装 Ant Design 和 MUI，出来的界面会比没有组件库还乱。
六、可直接复制的地址表
先说清楚：公众号正文里的网址点不动（微信会把正文超链接整段剥离）。下面的地址请手动输入或复制，也可以点本文左下角的「阅读原文」打开 GitHub 仓库集合页。
| 库 | GitHub | 官网 | 安装 |
|---|---|---|---|
| shadcn/ui | github.com/shadcn-ui/ui | ui.shadcn.com | npx shadcn@latest init |
| Radix UI | github.com/radix-ui/primitives | radix-ui.com | @radix-ui/react-* |
| Headless UI | github.com/tailwindlabs/headlessui | headlessui.com | @headlessui/react |
| React Bits | github.com/DavidHDev/react-bits | reactbits.dev | 复制源码 |
| Ant Design | github.com/ant-design/ant-design | ant.design | antd |
| MUI | github.com/mui/material-ui | mui.com | @mui/material |
| Chakra UI | github.com/chakra-ui/chakra-ui | chakra-ui.com | @chakra-ui/react |
| Mantine | github.com/mantinedev/mantine | mantine.dev | @mantine/core |
| HeroUI | github.com/heroui-inc/heroui | heroui.com | @heroui/react |
| daisyUI | github.com/saadeghi/daisyui | daisyui.com | daisyui |
| Fluent UI | github.com/microsoft/fluentui | fluentui.dev | @fluentui/react-components（v9） |
| React Bootstrap | github.com/react-bootstrap/react-bootstrap | react-bootstrap.github.io | react-bootstrap |
两个查数据的入口（自己核对任何库都用得上）：
| 想查什么 | 地址 |
|---|---|
| Star / 最后提交时间 / 许可证 | github.com/<用户名>/<仓库名> |
| 周下载量 / 最新版本 | npmjs.com/package/<包名> |
七、边界和坑：这份数据能告诉你什么
老规矩，三件做得到 + 一件做不到。
这三件事，数据能回答：
| 问题 | 怎么看 |
|---|---|
| 这个库还在维护吗 | 看最后提交时间。半年没提交的，心里要有数 |
| 它在生态里的位置 | Star 看知名度，下载量看被依赖程度，两个一起看 |
| 我能不能商用、能不能再分发 | 看 LICENSE。MIT / Apache-2.0 最宽松，带 Commons Clause 的要留意再分发限制 |
这一件事，数据回答不了（附证据）：
数据不能告诉你「这个库好不好用」。 我列的所有数字——Star、下载量、提交时间、版本号——没有一个能衡量 API 设计是否顺手、文档是否清楚、出错时能不能搜到答案。
举个最直接的例子：Mantine 的周下载 274 万，HeroUI 只有 65 万，但这两个在「默认样式好不好看」这件事上，你看了官网截图五秒钟就能做出判断——这件事数据永远比不上你自己打开页面看一眼。
另外三个现实提醒：
- 下载量有口径陷阱。 我上面 Radix 那行标的是单个子包的下载量，不是整个库。跨库比较数字之前，先看口径是否一致（这也是为什么上面那张表专门加了「口径」一列）。
- Star 可以买、可以被推送带飞。 一个库上热搜、被大 V 转发一次，Star 一天涨几千很正常，但下载量不会跟着动。在两者冲突时，信下载量。
- 版本号决定了你要读哪份文档。 Ant Design 已经是 v6、MUI 是 v9、Mantine 是 v9，而网上大量教程还停在两三个大版本之前。照抄教程前先看版本号。
八、今天可以做的一件事
打开你手上那个项目，先回答一个问题：它需要的是「行为」还是「外观」？
- 需要行为（弹窗怎么关、下拉怎么用键盘操作）→ 去原语层拿
- 需要外观（按钮长什么样、间距多大）→ 去完整体系拿，或者用设计文档自己定
答完这一句，你就不需要再看任何「12 个组件库排行榜」了——因为层次的问题解决了，剩下的只是口味问题。
你的项目现在用哪个组件库？踩过什么坑？ 评论区聊聊，我挑几个典型的做一期实测。
