文章底部获取项目地址
平时我们用其他 UI 组件库写一个项目时，自带样式往往不能满足产品设计需求，于是就 !important 覆盖样式，如果覆盖后还不能实现交互效果，就重写样式，这样就会导致代码越来越冗长、复杂、难以维护。于是就有了 Headless UI。
npm install @headlessui/react
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
function Example() {
return (
<Menu>
<MenuButton>My account</MenuButton>
<MenuItems anchor="bottom">
<MenuItem>
<a className="block data-[focus]:bg-blue-100" href="/settings">
Settings
</a>
</MenuItem>
<MenuItem>
<a className="block data-[focus]:bg-blue-100" href="/support">
Support
</a>
</MenuItem>
<MenuItem>
<a className="block data-[focus]:bg-blue-100" href="/license">
License
</a>
</MenuItem>
</MenuItems>
</Menu>
)
}
《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、在看、转发、关注！！！
其他推荐
项目地址
GitHub：https://github.com/tailwindlabs/headlessui
