28.8K ·GitHub
What is this?
Headless UI is a set of completely unstyled, fully accessible UI components designed to integrate beautifully with Tailwind CSS, built by the Tailwind Labs team.
Headless UI is a set of completely unstyled, fully accessible UI components designed to integrate beautifully with Tailwind CSS, built by the Tailwind Labs team.Is this for React, Vue, or both?Both, via separate npm packages: @headlessui/react for React apps and @headlessui/vue for Vue apps. A third package, @headlessui/tailwindcss, is also published.
Both, via separate npm packages: @headlessui/react for React apps and @headlessui/vue for Vue apps. A third package, @headlessui/tailwindcss, is also published.How do I add it to my project?Install the package for your framework: npm install @headlessui/react@latest or npm install @headlessui/vue@latest. Full documentation lives at headlessui.com.
Install the package for your framework: npm install @headlessui/react@latest or npm install @headlessui/vue@latest. Full documentation lives at headlessui.com.Do I have to use Tailwind CSS with it?The components are designed to integrate beautifully with Tailwind CSS. Since they ship with zero styles, you describe the entire look yourself — Tailwind is just the natural pairing.
The components are designed to integrate beautifully with Tailwind CSS. Since they ship with zero styles, you describe the entire look yourself — Tailwind is just the natural pairing.Is the insiders build safe to use in production?Treat released versions as stable; the insiders build tracks the latest commit on main, doesn't follow semver, and its APIs can change before an official release.
Treat released versions as stable; the insiders build tracks the latest commit on main, doesn't follow semver, and its APIs can change before an official release.Do I have to handle keyboard support and ARIA attributes myself?No — accessibility is the headline feature: components are fully accessible out of the box, so focus and keyboard behavior are handled while you only take care of styling.
No — accessibility is the headline feature: components are fully accessible out of the box, so focus and keyboard behavior are handled while you only take care of styling.Why would I pick unstyled components over a pre-styled UI kit?You keep full control of the markup and look — styling everything with your own Tailwind classes — while the library still handles the accessible behavior for you.
You keep full control of the markup and look — styling everything with your own Tailwind classes — while the library still handles the accessible behavior for you.Is this an established project or a new experiment?It is well established: hosted under the tailwindlabs GitHub organization, developed since 2020, with roughly 28,800 stars.
It is well established: hosted under the tailwindlabs GitHub organization, developed since 2020, with roughly 28,800 stars.What are similar projects?arc-library, base-ui, chakra-ui, bootstrap-vue, Semantic-UI-React, primitives, vant, shoelace
arc-library, base-ui, chakra-ui, bootstrap-vue, Semantic-UI-React, primitives, vant, shoelaceWhich topics is it in?a11y, components, ui-library, accessibility, tailwindcss, component-library, vue, ui-components, customization, ui, web-development, react
a11y, components, ui-library, accessibility, tailwindcss, component-library, vue, ui-components, customization, ui, web-development, react