Features
- Completely unstyled, accessible UI components
- Designed to integrate with Tailwind CSS
- React and Vue support
- Transition component for enter/leave animations
- Keyboard navigation and ARIA compliance
Pros
- Perfect companion to Tailwind CSS
- Supports both React and Vue
- Simple API compared to Radix UI
Cons
- Fewer components than Radix UI
- Less composable than Radix's sub-component API
- Maintained by Tailwind Labs — tied to Tailwind ecosystem
Overview
Headless UI is a set of completely unstyled, accessible UI components created by Tailwind Labs. It provides the interactive behavior and accessibility for common UI patterns (menus, listboxes, comboboxes, dialogs, tabs, etc.) while leaving all styling decisions to you — designed specifically to pair with Tailwind CSS.
Unlike Radix UI’s granular sub-component approach, Headless UI offers a simpler API surface with fewer components but excellent defaults. It supports both React and Vue, making it one of the few headless component libraries with multi-framework support.
When to Use
Headless UI is the right choice when you’re using Tailwind CSS and need accessible interactive components with a simple API. It’s ideal when you don’t need the full breadth of Radix UI’s component library and prefer a streamlined set of well-designed primitives.
Getting Started
npm install @headlessui/reactimport { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
function MyMenu() {
return (
<Menu>
<MenuButton className="rounded bg-blue-500 px-4 py-2 text-white">Options</MenuButton>
<MenuItems className="mt-1 rounded bg-white shadow-lg">
<MenuItem><a className="block px-4 py-2" href="/edit">Edit</a></MenuItem>
<MenuItem><a className="block px-4 py-2" href="/delete">Delete</a></MenuItem>
</MenuItems>
</Menu>
);
}