【前端】一文说清组件库选型 React/Vue 2026

现状趋势

  • 已经分成两条技术路线，这两类解决的问题不同。
  1. 成品型组件库：Ant Design / MUI / Element Plus
    Headless
  2. 自有源码型组件体系：Base UI / Radix + shadcn/ui

术语回顾

英文术语中文理解你只需要先记住什么
Headless UI无样式组件 / 只管行为不管外观把“交互逻辑”和“样式”拆开
Primitive基础原子能力 / 底层组件比 Button 更底层，比如 Portal、Focus 管理
Design System设计系统统一颜色、间距、圆角、组件规范
Design Token设计变量把颜色、间距等抽成统一变量
Compound Components组合式组件一个大组件拆成多个有协作关系的小组件
Controlled Component受控组件状态由外部传入
Uncontrolled Component非受控组件状态由组件自己维护
Portal跨层渲染把弹窗 DOM 渲染到body等其他位置
Focus Management焦点管理控制键盘焦点应该去哪、回来去哪
Focus Trap焦点锁定弹窗打开时 Tab 不允许跑到弹窗外
Accessibility / a11y无障碍让键盘、屏幕阅读器也能正常使用组件
ARIA无障碍语义属性给浏览器/辅助设备说明组件是什么
Keyboard Navigation键盘导航用 Tab、方向键、Enter 等操作组件
State Machine状态机用明确状态和状态转换描述组件行为
Variant样式变体比如 Button 的 primary / danger / small
Theming主题系统明暗主题、品牌主题切换
Responsive Design响应式设计根据屏幕大小改变布局
Adaptive UI自适应组件同一个功能，PC 和手机可能采用不同交互
Overlay浮层Dialog、Popover、Tooltip 这一整类
Gesture手势拖动、滑动、长按等
Virtualization虚拟列表 / 虚拟渲染只渲染屏幕附近的数据，解决大量列表性能问题
DataGrid高级数据表格比普通 Table 更复杂，支持编辑、固定列、虚拟滚动等
Drag & Drop / DnD拖拽拖动排序、移动节点
Tree Shaking无用代码删除打包时去掉没用到的模块
SSR服务端渲染HTML 先在服务器生成
Hydration水合浏览器把服务器生成的 HTML 接管成可交互 React 页面
Monorepo单仓多包一个代码仓库管理多个 package
Tree / TreeView树组件文件目录那种层级结构
Context Menu右键菜单鼠标右键弹出的菜单
Tooltip提示气泡鼠标悬停时的小提示
Bottom Sheet底部抽屉手机底部向上弹出的面板
Action Sheet底部操作菜单手机底部弹出一组操作按钮
Swipe Action滑动操作列表项左滑出现删除等操作
Pull to Refresh下拉刷新手机列表向下拉触发刷新
Safe Area安全区域避开刘海、底部 Home 条等
Scroll Lock滚动锁定弹窗打开时禁止背景页面滚动
Pointer Event指针事件对鼠标、触摸笔、触摸统一抽象的事件体系
Roving tabindex移动焦点索引一组同类控件里，Tab 键只负责“进入这组控件”，方向键负责“在组内移动”。
Typeahead键盘字符快速定位在下拉菜单里输入ap快速跳到 Apple
Polymorphic Component多态组件一个组件能换底层 HTML 标签，比如 Button 渲染成
asChild把行为能力挂到子元素上shadcn/Radix 常见写法，避免额外 DOM

重点组件回顾

  • Combobox

    • 样子：输入框 + 下拉列表。
    • 用途：先输入搜索，再从结果里选。

  • 浮层组件

    • Dialog

      • 屏幕中间弹窗。
      • 用于确认、编辑、重要操作。

    • Drawer

      • 从屏幕边缘滑出的抽屉。
      • 用于设置、筛选、详情。

    • Popover

      • 贴着某个按钮或元素出现的小面板。
      • 用于临时设置、选择。

    • Tooltip

      • 鼠标悬停 / 聚焦时出现的小提示。
      • 主要负责解释。

    • Toast

      • 页面角落短暂出现的通知。
      • 例如“保存成功”“复制成功”。
    Dialog = 中间弹 Drawer = 边上弹 Popover = 元素旁边弹 Tooltip = 小提示 Toast = 短通知

  • 导航组件

    • Tabs

      • 同一个区域切换不同内容。

    • Menu

      • 一组页面入口或操作命令。

    • Breadcrumb

      • 显示当前位置路径。

      • 例如：

        首页 > 商品 > 手机

    • Pagination

      • 分页、翻页。

      • 例如：

        < 1 2 3 4 5 >
    Tabs = 切当前区域 Menu = 去功能 / 执行操作 Breadcrumb = 看自己在哪 Pagination = 翻数据页

  • 复杂组件

    • DataGrid

      • 加强版 Table。

      • 常包含排序、筛选、编辑、固定列、虚拟滚动等。

      • 记：

        DataGrid = 网页版小型 Excel

    • Cascader

      • 多层级选择。

      • 例如：

        地球 → 中国 → 上海 → 虹桥

  • 移动端组件

    • BottomSheet

      • 从底部拉起来的大内容面板，通常还能拖动。

    • ActionSheet

      • 从底部弹出的一组操作按钮。

    • SwipeAction

      • 左右滑动列表项露出删除等操作。

    • PullToRefresh

      • 下拉页面触发刷新。
    BottomSheet = 底部内容面板 ActionSheet = 底部操作菜单 SwipeAction = 左滑露操作 PullToRefresh = 下拉刷新
  • 总结
Combobox = 搜 + 选 Dialog = 中间弹 Drawer = 边上弹 Popover = 元素旁边弹 Tooltip = 提示 Toast = 通知 Tabs = 切内容 Menu = 功能入口 Breadcrumb = 当前位置 Pagination = 翻页 DataGrid = 网页 Excel Cascader = 多级选择 BottomSheet = 底部大面板 ActionSheet = 底部操作菜单 SwipeAction = 左滑操作 PullToRefresh = 下拉刷新

React

排名方案2026 推荐度最适合
1shadcn/ui + Base UI + Tailwind CSSSAI 产品、SaaS、官网、复杂业务产品、自建设计系统
2Ant Design 6S-中后台、管理系统、国内企业业务
3MUI + MUI XA+国际化企业产品、复杂数据型应用
4Radix UI + TailwindA已经基于 Radix 的项目、底层设计系统
—自己从零造组件库不推荐除非你就在做 Design System 基础设施

为什么是1️⃣shadcn/ui + Base UI

  1. 不是因为它“组件最好看”，而是它的架构非常符合现在前端的发展方向——shadcn/ui 本质上不是传统意义上的 npm 黑盒组件库，而是一套“把组件源码交给你的组件分发体系”。便于自行修改调整
  2. shadcn 现在还有 Registry，可以把公司自己的全部作为私有 UI Registry 分发。2026 年甚至支持直接把 GitHub 仓库作为 Registry。
  3. shadcn/ui应关注Base UI（新项目默认）而不是Radix UI，Base UI 无样式不捆绑不限定样式、可组合、强调 accessibility 和性能的 React primitives，适合作为设计系统底座。但老项目没必要为了追新迁移
  • Radix UI 和 Base UI 区别
  1. Radix UI 和 Base UI 不是上下级，而是同赛道的两个竞争实现；它们很像，因为它们解决的是同一批 Web UI 底层问题，而且遵循相同的 Web/ARIA 标准。
  2. Radix UI
    更早出现。
    生产环境历史更长。
    社区和已有项目更多。
    可以理解为成熟的第一代代表方案。
  3. Base UI
    后出现。
    吸收了 Radix、Material UI、Floating UI 等长期实践经验。
    在部分 API、组件覆盖和移动交互能力上重新设计。
    2026 年 shadcn/ui 新项目默认优先 Base UI。

为什么是2️⃣Ant Design 6

  1. 如果需求变成：“我要最快做一个功能很多的企业后台。”那首选antd，因为AntD 是业务生产力组件库，而 shadcn 更像产品 UI / Design System 基础设施，AntD 明显更省时间。
  2. 但是设计语言和组件抽象太强势，项目很容易因为个性化调整导致用大量组件库API+design token+CSS覆盖…技术债

为什么是3️⃣MUI

  • Material UI 本身有 40+ 基础组件，MUI 官方仍在持续投入 Material UI，同时开发下一代主要版本；MUI X 则覆盖复杂 Data Grid 等这类复杂企业组件场景。
  • 国外常用
  • 缺点是默认审美是Material Design，如果产品本身是Google / Material 风格没问题，如果设计稿自定义风格则最好别用

Vue

排名方案推荐度用途
1Element PlusS-Vue 企业后台
2Naive UIA+更现代、更轻量的 Vue 应用
3Arco Design VueA中后台、字节风格 Design System
4Headless / 自建设计系统A高度定制产品
5VuetifyB+Material Design 项目
  • 不知道选什么直接上Element Plus，因为生态成熟、组件全、中文资料多、问题解答多、后台场景覆盖完整、迁移成本可预测。官方仍然明确以 Vue 3 UI Framework 定位，并且支持完整引入与按需自动导入。

移动端单独看

  • shadcn 并非“不适合移动端”，而是“不负责替你解决移动端专用交互体系”。可用 shadcn 做一个真正的响应式产品
场景ReactVue我的默认选择
H5 / 移动 WebAnt Design Mobile / 自建 Tailwind UIVantReact 偏自建；Vue 直接 Vant
移动端后台/业务系统Ant Design MobileVant成品库优先
高定制 AI / SaaS 移动 WebTailwind + Base UI/shadcn 思路，自写移动组件Headless + Tailwind自建设计系统
iOS/Android 跨端 AppReact Native 生态—React Native
Web 技术直接打包 AppIonic ReactIonic VueIonic + Capacitor
小程序Taro / uni-appuni-app看团队栈

选型

  • 样式与外观
  • API设计：props清晰、易组合扩展覆盖、默认值
  • 工程化成熟度
  • 维护活跃度
  • 社区规模
  • 新版本兼容、升级成本、生态绑定程度

根据任务类型

  1. 我要尽快交付后台：直接antd/element plus效率高
  2. 做自己风格的产品UI：shadcn/ui+tailwindcss+design token
  3. 公司设计系统：Design Tokens->Base UI->公司 primitives->公司 UI Components->商业组件->shadcn Registry内部发布

组件覆盖范围

看是否有需要的组件

  • 重点
  1. 基础组件
    Button / Input / Checkbox / Radio / Switch
  2. 表单组件
    Select / Combobox / DatePicker / Form
  3. 浮层组件
    Dialog / Drawer / Popover / Tooltip / Toast
  4. 导航组件
    Tabs / Menu / Breadcrumb / Pagination
  5. 复杂组件
    Table / DataGrid / Tree / Cascader / Upload
  6. 移动端组件
    BottomSheet / ActionSheet / SwipeAction / PullToRefresh

交互能力

  • 交互动作：点击、 键盘、 焦点、弹层、滚动、手势、状态切换
  • 重点
    受控 / 非受控状态
    键盘导航
    焦点管理
    点击外部关闭
    ESC 关闭
    Portal 跨层渲染
    滚动锁定
    拖拽 / 滑动
    动画状态

无障碍

  • 无障碍（Accessibility / a11y）是成熟组件库的重要分界线。
  • 考虑：语义 HTML、ARIA、键盘操作、焦点顺序、屏幕阅读器

ARIA（Accessible Rich Internet Applications，可访问富互联网应用）是一套由 W3C 制定的 HTML 属性规范，用于给浏览器和辅助技术（如屏幕阅读器）补充说明页面元素的语义和状态。

响应式和多端适配

  • 响应式布局
    Safe Area（刘海 / Home 条安全区）
    软键盘
    Touch
    Hover
    Pointer
    横竖屏
    小屏交互

性能

  • 考虑：首屏体积、Tree Shaking、按需加载、渲染次数、大数据性能
  • 重点：
    虚拟列表（Virtualization）
    大数据量渲染
    memo
    状态粒度
    按需加载
    bundle size