Tailwind CSS Academy · Lesson

Introduction to Headless UI

Understand the headless component concept, install @headlessui/react, and explore the components available including Menu, Dialog, and Listbox.

What Is a Headless Component?

A headless component provides behavior, state management, and accessibility without any built-in visual styling. It gives you all the keyboard navigation, ARIA attributes, and interaction logic — but leaves the visual presentation entirely to you. This is the opposite of a styled component library like Bootstrap, which bundles both behavior and appearance. Headless components let you apply your own Tailwind classes while getting accessibility for free.

Introducing Headless UI

Headless UI is a library of completely unstyled, accessible UI components built by the Tailwind Labs team. It provides components like Menu (dropdowns), Dialog (modals), Listbox (select menus), Combobox (autocomplete), Switch (toggles), Disclosure (accordions), and Tabs. All accessibility requirements — ARIA roles, keyboard navigation, focus management — are handled internally.

# Install for React
npm install @headlessui/react

# Install for Vue
npm install @headlessui/vue

# Available components:
# Menu, Dialog, Listbox, Combobox,
# Switch, Disclosure, Popover, RadioGroup,
# Tab (Tabs, TabGroup, TabList, TabPanel)

import { Menu, Dialog, Listbox } from '@headlessui/react';

All lessons in this course

← Back to Tailwind CSS Academy