How headless components became the future for building UI libraries

In the past few years, a new trend has emerged in React development: headless components. These are unstyled building blocks for UI development, including elements like buttons, dropdowns, and date pickers.

Rise in popularity of Radix, a headless component library

Headless libraries offer the benefits of reusing a UI component library, such as performance, accessibility, maintainability. But unlike non-headless React libraries, headless offers greater flexibility in styling and functionality. They ship unstyled components by default, meaning developers don’t have to compete with opinionated styles.

Benefits of headless components

This flexibility has propelled headless libraries like Radix and HeadlessUI to become the standard for new projects. Tools such as Shadcn and Subframe have simplified scaffolding out an in-house design system. Even established libraries like Material UI are now developing their own headless versions.

It looks like the future of React will be built on headless components.

In the past, popular component libraries like Material UI and AntD bundled styles and functionality together. The main advantage of pre-styled component libraries was speed of product development. After all, why build and style your own components from scratch when you could simply use a prebuilt one?

Bundling prebuilt styles was a clever growth strategy. Component library decisions are typically made by engineers, and for a non-designer, it's far easier to start with a decent-looking component library and reskin it later with a designer's help.

But there was one major drawback: traditional component libraries are notoriously hard to style.

That’s because most libraries have opinionated & bloated styles like backgrounds that needed to be “reset”. Additionally, it rarely offered APIs to style each element rendered, meaning you’d need to rely on nested CSS descendant selectors or undocumented workarounds.

Non-headless libraries ship with opinionated styles, meaning you’d need to understand its internal CSS classes to override any default styles. Headless libraries like Radix makes styling trivial.

The result? You'd spend more time fighting your component library than actually building cool stuff.

But then, in December 2020, Radix was released.

While Radix wasn't the first headless component library (ReachUI was another early pioneer) it quickly became the top choice. This success was largely due to the dedicated, full-time efforts of the engineering team at Modulz (later acquired by WorkOS).

Radix enjoyed modest success on release, but wasn’t nearly as popular as it should have been.

That was — until two events catapulted Radix into becoming the most popular React library:

1. The rising popularity of in-house design systems, making headless components critical for building your own component library
2. The release of Shadcn, a library of copy/paste-able components built with Radix and Tailwind CSS

While Radix provided headless building blocks, developers still had to style them, create APIs, and export them as a complete component library. Shadcn's innovation lay in offering a more opinionated, copy-and-paste-ready component library with a modern look-and-feel. Developers could now kickstart custom design systems by simply running a CLI command or copying and pasting code.

With Radix, developers no longer spent hours styling everything from scratch. The community began to see Radix as a quick way to achieve the same out-of-box experience as MaterialUI and other libraries, but with greater control over styling and functionality. As more developers fell in love with Radix, word spread.

Today, Radix has over 9.1 million weekly downloads on npm (as of Oct 2024) – a number that will continue to grow.

First, the tooling will get even better. Countless headless libraries have popped up for landing pages, tables, and forms. And as the community grows, we expect even more libraries to pop up.

Headless components have also enabled new startups to flourish. Code-first design tools like Subframe now use headless to let teams go from design to code without an engineer. AI tools like V0 use headless to produce more control and uniformity for generated code.

We’re also seeing more headless libraries competing with Radix. React Aria, HeadlessUI, MUI Base UI have recently emerged, along with Radix ports to other frameworks like Vue. With more libraries, developers can choose their favorite headless library based on their personal preferences.

The future for headless components is undeniably exciting — and will influence the React ecosystem for years to come.