The web is full of bad UI components. It is not rare to see a menu that doesn't react to arrow keys or a select box that doesn't support screen readers. Building these components is really (really!) hard so developers rely on UI libraries like MUI to solve that problem for them. They work, but are often hard to customize to your company’s style. So you’re left with either building your own badly behaving components, or using good components that just don’t fit the style you need.

Incredibly enough, there is a solution: React headless components, which implement the behavior of the components, but leave the rendering and styling up to you. The best of both worlds!

In this talk I will explain the problems we encounter when building our own components, the problems we encounter customizing existing library components, and how headless components solve both problems using the inversion of control design pattern.