// the find
tailwindlabs/headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Headless UI gives you accessible, unstyled React and Vue components — dialogs, dropdowns, comboboxes, tabs — where you own 100% of the CSS. It's the right choice if you're already on Tailwind and don't want to fight another component library's design system to match your own.
The accessibility work is genuinely thorough — focus trapping, aria attributes, keyboard navigation, and scroll locking all handled correctly across components. The recent refactor to explicit state machines (see combobox-machine.ts, listbox-machine.ts) makes the interaction logic predictable and testable rather than buried in ad-hoc event handlers. Both React and Vue packages share the same mental model, so switching between them isn't a relearning exercise. The test suite is unusually complete — dedicated accessibility assertions and interaction helpers, not just unit snapshot noise.
Component selection is narrow: no data table, date picker, or tree view, so you'll hit a wall fast if your app needs anything beyond modal/menu/select primitives. The Vue package consistently lags the React one on new features — if you're on Vue, check the Vue CHANGELOG before assuming parity. No built-in animation primitives; the Transition component is serviceable but you'll still be fighting CSS keyframes for anything non-trivial. The `as` prop polymorphism, while flexible, produces confusing TypeScript errors when you pass an incompatible element type — the error messages don't point you at the actual constraint.