WHAT - 组件库开发场景 - 完全无样式的 UI 组件库 Headless UI
文章目录
- 核心特点
- 支持的组件（React & Vue）
- 使用示例（React）
- 适用场景
- 不适合的情况
可能你听过 radix-ui，这就是一个 Headless UI 组件库。
Headless UI 是一个由 Tailwind Labs（也就是 Tailwind CSS 的开发团队）推出的 完全无样式的 UI 组件库，主要用于 React 和 Vue 项目。它的设计理念是：
“逻辑你来用，样式你来定。”
核心特点
| 特性 | 说明 |
|---|---|
| 无样式（unstyled） | 不提供任何默认样式，完全交由开发者自定义。适合 Tailwind CSS 或任何其他样式系统。 |
| 无障碍（accessible） | 所有组件都内建了完善的 ARIA 属性、键盘交互等，符合可访问性标准。 |
| 只关注交互逻辑 | 提供组件行为逻辑，比如开关状态、键盘事件等，而不是 UI 展示。 |
支持的组件（React & Vue）
例如：
<Dialog />：模态框（Modal）<Menu />：下拉菜单<Listbox />：自定义下拉选择器<Disclosure />：展开/折叠面板<Popover />：弹出层<Switch />：开关<Transition />：过渡动画
使用示例（React）
以 Dialog（模态框）为例：
import { Dialog } from '@headlessui/react'export default function MyModal({ isOpen, onClose }) {return (<Dialog open={isOpen} onClose={onClose}><Dialog.Panel className="bg-white p-4 rounded"><Dialog.Title>提示</Dialog.Title><Dialog.Description>这是一个无样式的模态框</Dialog.Description><button onClick={onClose}>关闭</button></Dialog.Panel></Dialog>)
}
你可以用 Tailwind CSS 或其他样式方案自定义外观。
适用场景
- 使用 Tailwind CSS 时，搭配使用非常合适。关于 Tailwind 可以阅读 WHAT - Tailwind 样式方案（不写任何自定义样式）
- 你希望完全掌控样式和布局
- 对无障碍（accessibility）有要求
- 想构建设计系统但不想重写所有交互逻辑
不适合的情况
如果你想开箱即用有漂亮样式的 UI 组件库（比如 Ant Design、MUI），那么 Headless UI 并不适合你。