Design System Glossary

Headless components

Headless components ship the behaviour and accessibility of a component — keyboard handling, ARIA wiring, focus management, state — without imposing the styling. The consumer brings their own design tokens and CSS; the library brings the hard parts that take five iterations to get right.

The pattern matured around Radix UI, Headless UI, Ariakit and React Aria, and it's now the dominant architecture for new design systems. It separates concerns cleanly: the headless layer guarantees a robust, accessible primitive; the design system layer expresses brand. Our take on the implications for in-house libraries is in the future of design systems.