Headless UI
By Tailwind Labs
Headless UI is a set of completely unstyled, fully accessible UI components — including menus, dialogs, and switches — designed to integrate seamlessly with Tailwind CSS while leaving all visual styling to the developer.
Definition
Headless UI is a set of completely unstyled, fully accessible UI components — including menus, dialogs, and switches — designed to integrate seamlessly with Tailwind CSS while leaving all visual styling to the developer.
Overview
Headless UI was built by Tailwind Labs, the creators of Tailwind CSS, specifically to pair with utility-first styling: it supplies the interactive behavior and accessibility handling for common patterns like listboxes, dialogs, disclosures, and switches, while every visual detail is left to Tailwind classes or any other styling approach. This mirrors the philosophy of Radix UI, though Headless UI covers a smaller, more curated set of components and is available for both React and Vue. Each component manages keyboard interaction, focus trapping, and ARIA attributes internally, and exposes render props or slot-based APIs so developers can control the markup and classes applied to each state (open, active, selected, disabled) without reimplementing accessibility logic. This keeps teams from having to choose between good accessibility and full design freedom. Because it was designed by the Tailwind team for the Tailwind ecosystem, Headless UI is a common companion in projects already using Tailwind CSS utility classes, and it's often mentioned alongside Radix UI as one of the two leading unstyled component options for building accessible, custom-styled interfaces.
Key Features
- Completely unstyled components with accessibility and behavior handled internally
- Official support for both React and Vue
- Render-prop and slot-based APIs for styling different component states
- Built-in keyboard navigation and ARIA attribute management
- Designed to pair naturally with Tailwind CSS utility classes
- Focused, curated set of common interactive patterns (menus, dialogs, tabs, switches)