Headless UI
Headless UI is the React (or framework) pattern of unstyled, accessible component primitives that handle behavior (state, keyboard nav, ARIA) but leave visual styling to the consumer. Radix UI, React Aria, Headless UI by Tailwind Labs are 2026 leaders.
Traditional component libraries ship behavior + styling together — hard to customize without overriding both. Headless UI separates concerns: the library handles accessibility (focus management, keyboard nav, ARIA attributes, screen reader behavior), state (open/closed, hover, focus), and event handling. Consumer adds styling via Tailwind / CSS / styled-components. Implementations: Radix UI (most popular React headless library), React Aria (Adobe), Headless UI by Tailwind Labs, Ark UI (Park UI's underlying primitives). shadcn/ui builds on Radix and Tailwind. By 2026 headless UI is the dominant pattern — full visual control + free accessibility.
When to use headless ui
- Any custom-designed UI.
- Apps that need custom visual identity.
Common mistakes
- Reimplementing accessibility on top of styled components — wasted work, headless libs handle it.
FAQ
What is headless ui?
Headless UI is the React (or framework) pattern of unstyled, accessible component primitives that handle behavior (state, keyboard nav, ARIA) but leave visual styling to the consumer. Radix UI, React Aria, Headless UI by Tailwind Labs are 2026 leaders.
When should I use headless ui?
Any custom-designed UI. Apps that need custom visual identity.
What are the most common mistakes with headless ui?
Reimplementing accessibility on top of styled components — wasted work, headless libs handle it.
Related terms
- Design token — Design tokens are the named, abstracted values that capture design decisions (colors, spacing, typography, radii) in code-agnostic format — letting designers + engineers share a single source of truth across platforms.
Last updated: 2026-06-01. Raw markdown: https://promtable.com/glossary/headless-ui.md.