Headless UI
Unstyled, accessible UI components (React and Vue) that you style yourself, often with Tailwind CSS.
- Stars
- 28.8k
- Forks
- 1.2k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 7 months ago
- Type
- Library
What it is
Headless UI is a set of interface building blocks such as menus, dialogs and similar widgets for React and Vue. The components come with behavior and accessibility built in but no visual styling, so you control the look with your own CSS, typically Tailwind CSS. It is used by developers who want accessible components without adopting a fixed design system.
- Build a dropdown menu that opens with a button and is usable by keyboard
- Create a modal dialog whose appearance you style with Tailwind classes
- Add accessible toggles or other interactive widgets to a React or Vue app
Great for
- React or Vue developers building custom-designed interfaces
- Teams already using Tailwind CSS who want accessible widgets that match their styling
- Projects that need keyboard and screen reader support without writing it from scratch
Not ideal for
- Anyone who wants ready-made, good-looking components out of the box, since the README says the components are completely unstyled
- Projects not using React or Vue, since the README lists only those two packages
- Beginners with no web development background, since the components require writing your own markup and styles
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm · React or Vue project
Install the React package (latest release)
npm install @headlessui/react@latestInstall the Vue package (latest release)
npm install @headlessui/vue@latest - 2
Run it
- Install the package for your framework using npm
- Import a component from the package in your React or Vue project
- Add your own Tailwind CSS classes or other styles to the rendered elements
- Check the documentation at headlessui.com for component usage details
- 3
Get the most out of it
- Use the official documentation at headlessui.com for component APIs and examples
- Pair the components with Tailwind CSS, as the project is designed for that combination
- Use the @headlessui/tailwindcss package listed in the README for Tailwind integration
- Ask questions or share best practices in the GitHub Discussions forum
Downloads
Strengths
- Components are unstyled, so they fit into any visual design
- The README describes the components as fully accessible
- Maintained by the Tailwind Labs team and published under the MIT license
Trade-offs
- Requires you to write your own styling, so it is not a quick visual solution
- The README lists only React and Vue packages and does not describe other frameworks
- Insiders builds do not follow semver, so their APIs may change
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| headlessui (this) | 28.8k | Library | intermediate | 7 months ago | React or Vue developers building custom-designed interfaces |
| bootstrap-vue | 14.4k | Library | intermediate | 7 months ago | Developers maintaining an existing Vue 2 app that already uses BootstrapVue |
| hyperui | 12.3k | Library | beginner | 11 days ago | Developers building marketing sites with Tailwind CSS |
| ui | 127k | Library | intermediate | 4 days ago | Developers building React or Next.js interfaces who want full control over component code |
| element | 54k | Library | beginner | 2.2 years ago | Developers maintaining an existing Vue 2.x web application |
| vant | 24.4k | Library | beginner | 4 days ago | Teams building mobile-first web apps or H5 pages in Vue |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.