$ show tailwindlabs/headlessui
Headless UI is a library of completely unstyled, fully accessible UI components for React and Vue. It provides behavior-only primitives like Combobox, Listbox, Dialog, Popover, Tabs, RadioGroup, and Switch, with no built-in styling, allowing consumers to own the visual layer. The architecture is a monorepo with parallel React and Vue packages that share identical component APIs, test suites, and accessibility patterns, ensuring feature parity across frameworks. Components use render props (React) and slots (Vue) to expose state like open, active, selected, and disabled, plus an `as` prop for polymorphic rendering and a Transition component for enter/leave animations. The codebase is heavily tested with thousands of test cases covering keyboard navigation, focus management, ARIA attributes, form integration, and edge cases like dynamic children and virtual scrolling. Key entry points include the Combobox, Listbox, and Dialog components in both React and Vue, along with shared test utilities for accessibility assertions and interaction simulation. The library is actively maintained with a focus on accessibility-first design, headless composition, and cross-framework consistency.
The LLM identified 5 files worth highlighting for reuse:
A reusable hook that manages the controlled/uncontrolled state pattern, allowing components to accept either a `value` prop (controlled) or `defaultValue` (uncontrolled) while exposing an `onChange` callback. It handles the internal state synchronization and is used across Combobox, Listbox, and RadioGroup. This is a self-contained pattern that can be extracted into any React project needing controlled/uncontrolled component semantics.
A finite state machine for the Combobox component, managing states like closed, open, and transitioning between them. It handles actions such as open, close, select, and focus, and is implemented in a framework-agnostic way that could be extracted and reused in other stateful components. Demonstrates non-obvious skill in modeling complex UI state transitions.
A centralized test assertion library that verifies ARIA attributes, focusability, visibility, and element linking (e.g., assertComboboxButtonLinkedWithCombobox). It provides reusable assertions for accessibility testing that can be applied to any component library or application, not just Headless UI. The module is self-contained and framework-agnostic, making it a strong candidate for extraction.
A Transition component that handles enter/leave animations with support for CSS transitions, custom transition functions, and render props. It supports both `static` and `unmount` modes, and can be composed with other components like Dialog and Popover. The component is self-contained and demonstrates a clean pattern for animation composition that could be reused in any React project.
An internal provider/consumer pair that manages open/closed state across component trees. It exposes `useOpenClosed` and `useOpenClosedProvider` hooks, enabling components like Dialog and Popover to coordinate visibility state without prop drilling. This is a clean, isolated pattern for cross-component state sharing that could be extracted into a standalone utility.