Headless UI
ELI5 — The Vibe Check
Headless UI is a component library that gives you all the behavior (keyboard navigation, focus management, accessibility) but zero styling. It's like buying a car engine without the body — you provide the looks, it provides the brains. You get a fully accessible dropdown that you can style however you want. No fighting with opinionated CSS. No !important overrides. Just behavior + your design.
Real Talk
Headless UI refers to unstyled component libraries that provide behavior, accessibility, and state management without imposing visual design. Components handle complex interaction patterns (comboboxes, dialogs, tabs, menus) with full ARIA compliance and keyboard navigation. Popular implementations include Headless UI (Tailwind Labs), Radix UI, React Aria (Adobe), and Ark UI. They're foundational to custom design systems where visual consistency matters.
When You'll Hear This
"Use Radix for the dropdown — it's headless, so we can style it to match our design system." / "Headless UI components handle all the a11y edge cases you'd forget."
Related Terms
Accessibility (a11y)
Accessibility (a11y) is making your website usable by everyone — including people using screen readers, keyboard-only navigation, or who have low vision.
ARIA
ARIA stands for Accessible Rich Internet Applications.
Component Library
A Component Library is a box of pre-built LEGO pieces for your UI — buttons, modals, dropdowns, all ready to snap together. Instead of building a date pick
Design System
A LEGO set for your UI — a collection of reusable components, colors, typography, and rules that keep your entire app looking consistent.
Radix UI
Radix UI gives you components that work perfectly but look like nothing.