Headless UI

Overview

Headless UI is a set of completely unstyled, fully accessible UI components from Tailwind Labs, the team behind Tailwind CSS. It provides the behavior and accessibility for common interactive components and leaves all styling to you, designed to pair with Tailwind CSS utility classes.

Version 2 covers dropdown menus, disclosures, dialogs, popovers, tabs and transitions, plus a full set of form components: button, checkbox, combobox, fieldset, input, listbox, radio group, select, switch and textarea. It is available for React and Vue, and Tailwind Labs uses it as the foundation for Tailwind Plus (formerly Tailwind UI).

Features

• Overlays and menus: Dropdown Menu, Dialog, Popover and Disclosure
• Navigation: Tabs and Transition
• Forms: Button, Checkbox, Combobox, Fieldset, Input, Listbox, Radio Group, Select, Switch and Textarea
• Fully accessible: Keyboard navigation, focus management and ARIA built in
• Unstyled: Style everything with Tailwind CSS or any CSS approach
• React and Vue: Official packages for both frameworks
• MIT licensed: Free and open source

Tech stack

• React, Vue
• Tailwind CSS (recommended)

Getting started

npm install @headlessui/react