UI Libraries UI 组件库
最后更新：2026-10-28
UI Libraries UI 组件库
React 组件库分两类思路：完整库（Ant Design、MUI、shadcn/ui）开箱即用，视觉行为由库统一；无头库（Radix、Headless UI）只给逻辑与可访问性，视觉由你接管。选型本质是在上线速度与定制自由度间权衡。
| 分组 | 生态与进阶 |
|---|---|
| 类型 | 第三方库 |
| 引入版本 | Ant Design v5、MUI v6、Radix UI 持续更新（2025） |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
# 完整组件库：npm install 后直接用
npm install antd
import { Button } from 'antd'
<Button type="primary" onClick={save}>保存</Button>
# 无头库：npm install 后自己写外观
npm install @radix-ui/react-dialog
import * as Dialog from '@radix-ui/react-dialog'
<Dialog.Root> {/* 逻辑：开关、焦点、无障碍由库管 */}
<Dialog.Trigger>打开</Dialog.Trigger>
<Dialog.Portal>{/* 视觉完全自定义 */}</Dialog.Portal>
</Dialog.Root>⚙️ 参数
| type / variant 等 props | 完整组件库的定制方式：通过 props 从库预设的变体中挑选外观与行为。 |
|---|---|
| render / asChild | 无头库的定制方式：库把交互状态与事件交给你的渲染函数或子元素，视觉完全自定义。 |
返回值：无返回值，第三方库用法说明见示例。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
模拟演示：上半部分是 AntD 风格按钮（蓝色主要按钮、虚线按钮），外观由 props 预设变体决定；下半部分是 Headless 风格按钮（紫色胶囊），外观完全由 render 函数自定义，按住时颜色加深（pressed 状态由「库」提供）。每次点击都写入下方操作日志。全部用原生实现模拟两种 API 风格。💡 要点
💡 提示 shadcn/ui 把基于 Tailwind + Radix 的组件源码复制进项目，介于完整库与无头库之间，近年最流行。
⚠️ 注意 完整组件库包体积较大，注意按需引入（tree-shaking）或子路径导入，避免首屏加载全部组件。
ℹ️ 说明 无头库默认零样式，但键盘导航、焦点管理、ARIA 等无障碍细节都已处理，适合深度定制的自建设计系统。
🏷️ 生态与进阶相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q Ant Design 和 MUI 怎么选？
A 中后台管理系统、偏中文生态选 AntD；国际化项目、需要 Material 设计与强大主题系统选 MUI。两者都支持按需引入与深度主题定制。
Q 无头组件库适合什么场景？
A 设计稿自定义程度高、需要完全掌控视觉时选 Radix / Headless UI。它们负责弹窗焦点、键盘操作、ARIA 等难点，你只需编写样式。
Q shadcn/ui 是组件库吗？
A 严格说不是——它把基于 Tailwind + Radix 的组件源码直接复制到你的项目里，代码归你所有、可随意修改，兼具开箱即用与可定制性。
