@headlessui/react

Headless UI is a collection of completely unstyled, fully accessible React and Vue UI components designed to integrate seamlessly with Tailwind CSS. Developed by the Tailwind Labs team, Headless UI provides the interactive behavior, accessibility features, keyboard navigation, and focus management for common UI patterns — Menu (Dropdown), Listbox (Select), Combobox (Autocomplete), Switch (Toggle), Dialog (Modal), Popover, Disclosure (Accordion), Tabs, Radio Group, and Transition — without any visual styling. Each component renders semantic HTML with proper ARIA attributes, handles keyboard interactions according to WAI-ARIA design patterns, manages focus correctly, and supports screen readers out of the box. Components use a render prop or slot-based API that gives you complete control over the rendered markup and styling. Headless UI is designed specifically for use with Tailwind CSS, where you apply utility classes directly to each component element. The library is smaller and more focused than Radix UI, covering fewer component types but integrating particularly well with the Tailwind CSS workflow. Headless UI is the recommended accessibility layer for Tailwind CSS projects that don't use shadcn/ui.