Headless UI：无样式、全无障碍的 UI 组件库

Headless UI：无样式、全无障碍的 UI 组件库

Tailwind CSS 团队推出的 Headless UI，提供了完整的、完全无样式的 UI 组件，已获得 28k+ Star。

Headless UI 是一组完全无样式、且具备完整无障碍访问能力的 UI 组件，专门为与 Tailwind CSS 搭配使用而设计。如果你用过 Tailwind CSS，应该对这套组件库不陌生。

组件库目前同时支持 React 和 Vue 两个版本，覆盖了最主流的前端框架生态。

为什么需要无样式的组件

市面上大多数 UI 组件库都自带一套预设样式，比如 Ant Design、Element Plus。它们的优势是开箱即用，但缺点也很明显——想要定制样式往往要写一堆覆盖代码，甚至需要修改源码。

Headless UI 走的是另一条路：组件只提供行为逻辑和可访问性，样式全部交给开发者自己控制。配合 Tailwind CSS 的原子化样式方案，可以快速构建出符合设计稿的组件，不需要和框架样式打架。

覆盖的组件

Headless UI 提供了日常开发中最常用的交互组件：

• Listbox（下拉选择）
• Combobox（带搜索的选择框）
• Menu（菜单）
• Dialog（弹窗）
• Popover（弹出气泡）
• Tabs（标签页）
• Transition（过渡动画）
• Disclosure（折叠面板）
• Switch（开关）
• Radio Group（单选框组）

每个组件都遵循 WAI-ARIA 规范，键盘导航、屏幕阅读器支持都内置好了。

安装使用

安装命令：

npm install @headlessui/react@latest

Vue 项目则安装：

npm install @headlessui/vue@latest

如果你愿意尝鲜，也可以安装 insiders 版本（对应主分支最新提交）：

npm install @headlessui/react@insiders

需要注意，insiders 版本不遵循 semver 规范，API 在正式发布前可能会有变化。

使用示例

以 Switch 开关组件为例，与 Tailwind CSS 配合，只需要写几行代码：

import { useState } from 'react' import { Switch } from '@headlessui/react' function MyToggle() { const [enabled, setEnabled] = useState(false) return ( <Switch checked={enabled} onChange={setEnabled} className={`${enabled ? 'bg-blue-600' : 'bg-gray-200'} relative inline-flex h-6 w-11 items-center rounded-full`} > <span className="sr-only">Enable notifications</span> <span className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition`} /> </Switch> ) }

样式完全由 Tailwind CSS 控制，想要什么外观都可以自由调整。

生态与社区

Headless UI 目前提供三个包：React 版本、Vue 版本，以及一个 Tailwind CSS 插件（用于增强组件样式能力）。每个包都在活跃维护中，社区讨论在 GitHub Discussions 中进行。

如果你正在使用 Tailwind CSS 并且厌倦了和 UI 库的样式打架，Headless UI 值得一试。

中，社区讨论在 GitHub Discussions 中进行。

如果你正在使用 Tailwind CSS 并且厌倦了和 UI 库的样式打架，Headless UI 值得一试。