WHAT - 组件库开发场景 - 完全无样式的 UI 组件库 Headless UI

可能你听过 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 并不适合你。