Headless UI

Unstyled, fully accessible UI components that integrate with Tailwind CSS. Each primitive handles behavior, keyboard navigation, focus management, and ARIA semantics while leaving styling entirely to you.

Built by Tailwind Labs, the team behind Tailwind CSS. Headless UI differentiates from other primitive libraries like Radix by being designed first for the Tailwind workflow, so components accept className props and compose naturally with utility classes. Available for both React and Vue.

Key capabilities:

• Unstyled primitives for Dialog, Menu, Popover, Tabs, Disclosure, Listbox, Combobox, Select, Switch, Radio Group, and form controls
• Full accessibility with WAI-ARIA patterns, focus trapping, and keyboard navigation out of the box
• Transition utilities for enter and leave animations with optional JavaScript callbacks
• React and Vue versions, each with idiomatic APIs for its framework
• Designed to pair with Tailwind CSS for rapid styling via utility classes

Use Headless UI when building React or Vue apps with Tailwind and need accessible dropdowns, modals, tabs, or form controls without fighting opinionated styles. Teams adopt it to get dialog focus management, menu keyboard navigation, and combobox autocomplete behavior while retaining full design control. Fits seamlessly into Tailwind-based design systems and component libraries.