# Headless UI

**Source:** https://promtable.com/glossary/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.

---
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

- 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.

## Related terms

- [design-token](https://promtable.com/glossary/design-token)

*Last updated: 2026-06-01*
---

Original page: https://promtable.com/glossary/headless-ui
Maintained by Promtable (https://promtable.com). Content: CC BY 4.0. Cite as "Promtable — https://promtable.com/glossary/headless-ui".
Contact: info@vibecodingturkey.com.