现状趋势已经分成两条技术路线这两类解决的问题不同。成品型组件库Ant Design / MUI / Element PlusHeadless自有源码型组件体系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 / smallTheming主题系统明暗主题、品牌主题切换Responsive Design响应式设计根据屏幕大小改变布局Adaptive UI自适应组件同一个功能PC 和手机可能采用不同交互Overlay浮层Dialog、Popover、Tooltip 这一整类Gesture手势拖动、滑动、长按等Virtualization虚拟列表 / 虚拟渲染只渲染屏幕附近的数据解决大量列表性能问题DataGrid高级数据表格比普通 Table 更复杂支持编辑、固定列、虚拟滚动等Drag Drop / DnD拖拽拖动排序、移动节点Tree Shaking无用代码删除打包时去掉没用到的模块SSR服务端渲染HTML 先在服务器生成Hydration水合浏览器把服务器生成的 HTML 接管成可交互 React 页面Monorepo单仓多包一个代码仓库管理多个 packageTree / 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快速跳到 ApplePolymorphic Component多态组件一个组件能换底层 HTML 标签比如 Button 渲染成aasChild把行为能力挂到子元素上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 网页版小型 ExcelCascader多层级选择。例如地球 → 中国 → 上海 → 虹桥移动端组件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不是因为它“组件最好看”而是它的架构非常符合现在前端的发展方向——shadcn/ui 本质上不是传统意义上的 npm 黑盒组件库而是一套“把组件源码交给你的组件分发体系”。便于自行修改调整shadcn 现在还有 Registry可以把公司自己的全部作为私有 UI Registry 分发。2026 年甚至支持直接把 GitHub 仓库作为 Registry。shadcn/ui应关注Base UI新项目默认而不是Radix UIBase UI 无样式不捆绑不限定样式、可组合、强调 accessibility 和性能的 React primitives适合作为设计系统底座。但老项目没必要为了追新迁移Radix UI 和 Base UI 区别Radix UI 和 Base UI 不是上下级而是同赛道的两个竞争实现它们很像因为它们解决的是同一批 Web UI 底层问题而且遵循相同的 Web/ARIA 标准。Radix UI更早出现。生产环境历史更长。社区和已有项目更多。可以理解为成熟的第一代代表方案。Base UI后出现。吸收了 Radix、Material UI、Floating UI 等长期实践经验。在部分 API、组件覆盖和移动交互能力上重新设计。2026 年 shadcn/ui 新项目默认优先 Base UI。为什么是2️⃣Ant Design 6如果需求变成“我要最快做一个功能很多的企业后台。”那首选antd因为AntD 是业务生产力组件库而 shadcn 更像产品 UI / Design System 基础设施AntD 明显更省时间。但是设计语言和组件抽象太强势项目很容易因为个性化调整导致用大量组件库APIdesign tokenCSS覆盖…技术债为什么是3️⃣MUIMaterial UI 本身有 40 基础组件MUI 官方仍在持续投入 Material UI同时开发下一代主要版本MUI X 则覆盖复杂 Data Grid 等这类复杂企业组件场景。国外常用缺点是默认审美是Material Design如果产品本身是Google / Material 风格没问题如果设计稿自定义风格则最好别用Vue排名方案推荐度用途1Element PlusS-Vue 企业后台2Naive UIA更现代、更轻量的 Vue 应用3Arco Design VueA中后台、字节风格 Design System4Headless / 自建设计系统A高度定制产品5VuetifyBMaterial 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 NativeWeb 技术直接打包 AppIonic ReactIonic VueIonic Capacitor小程序Taro / uni-appuni-app看团队栈选型样式与外观API设计props清晰、易组合扩展覆盖、默认值工程化成熟度维护活跃度社区规模新版本兼容、升级成本、生态绑定程度根据任务类型我要尽快交付后台直接antd/element plus效率高做自己风格的产品UIshadcn/uitailwindcssdesign token公司设计系统Design Tokens-Base UI-公司 primitives-公司 UI Components-商业组件-shadcn Registry内部发布组件覆盖范围看是否有需要的组件重点基础组件Button / Input / Checkbox / Radio / Switch表单组件Select / Combobox / DatePicker / Form浮层组件Dialog / Drawer / Popover / Tooltip / Toast导航组件Tabs / Menu / Breadcrumb / Pagination复杂组件Table / DataGrid / Tree / Cascader / Upload移动端组件BottomSheet / ActionSheet / SwipeAction / PullToRefresh交互能力交互动作点击、 键盘、 焦点、弹层、滚动、手势、状态切换重点受控 / 非受控状态键盘导航焦点管理点击外部关闭ESC 关闭Portal 跨层渲染滚动锁定拖拽 / 滑动动画状态无障碍无障碍Accessibility / a11y是成熟组件库的重要分界线。考虑语义 HTML、ARIA、键盘操作、焦点顺序、屏幕阅读器ARIAAccessible Rich Internet Applications可访问富互联网应用是一套由 W3C 制定的 HTML 属性规范用于给浏览器和辅助技术如屏幕阅读器补充说明页面元素的语义和状态。响应式和多端适配响应式布局Safe Area刘海 / Home 条安全区软键盘TouchHoverPointer横竖屏小屏交互性能考虑首屏体积、Tree Shaking、按需加载、渲染次数、大数据性能重点虚拟列表Virtualization大数据量渲染memo状态粒度按需加载bundle size