explaingit

tailwindlabs/headlessui

★ 28,560TypeScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · easy

TLDR

Unstyled, accessible UI components for React and Vue with built-in keyboard navigation and screen-reader support, you add the styles.

Mindmap

mindmap
  root((repo))
    What it does
      Dropdown menus
      Modal dialogs
      Tabs and toggles
      Keyboard accessible
    Key features
      No visual styling
      Screen reader support
      Keyboard navigation
      Fully customizable
    Tech stack
      React support
      Vue support
      Tailwind CSS
    Use cases
      Design system building
      Custom styled components
      Accessible web apps
      Brand-matched interfaces

Things people build with this

USE CASE 1

Build a custom design system by combining Headless UI components with your own Tailwind CSS styles.

USE CASE 2

Create accessible dropdown menus and modals without fighting against pre-built styles.

USE CASE 3

Develop web apps where keyboard navigation and screen-reader support work out of the box.

USE CASE 4

Match your brand's visual identity by styling interactive components from scratch.

Tech stack

TypeScriptReactVueTailwind CSS

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice and license text.

In plain English

Headless UI is a library of user interface components, things like dropdown menus, modal dialogs, tabs, and toggles, built for React and Vue web applications. The "headless" part means each component comes with all the interactive behavior and keyboard accessibility built in, but with absolutely no visual styling applied. You get the logic and the accessibility (screen-reader support, keyboard navigation) out of the box, while having complete freedom to style everything yourself using Tailwind CSS or any other styling approach. This solves a common problem: most UI component libraries come with opinionated styles that are hard to override to match your design. Headless UI skips the styles entirely so your team controls the appearance from the start. It is installed via npm with separate packages for React (@headlessui/react) and Vue (@headlessui/vue), and is designed and maintained by the Tailwind CSS team.

Copy-paste prompts

Prompt 1
Show me how to build a custom dropdown menu using Headless UI for React with Tailwind CSS styling.
Prompt 2
I need a modal dialog component that's accessible and keyboard-navigable. How do I use Headless UI?
Prompt 3
How do I install and set up @headlessui/react in my project and style a toggle switch?
Prompt 4
Create a tabbed interface with Headless UI that works with screen readers and keyboard navigation.
Prompt 5
What's the difference between Headless UI and other component libraries, and when should I use it?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.