Why are unstyled components so popular? Radix and Headless UI as examples

To avoid reinventing the wheel, using well-built UI to save development time and effort is quite normal. Typically, component libraries include considerations for style, logic, UX, usability, device compatibility, and more. We can easily use ready-made UI patterns and focus on solving the truly important business problems. Libraries like Bootstrap, Chakra, and MUI are well-known and established component libraries.

So, if ordinary component libraries can meet the needs, what problems do unstyled components solve?

Customization is the biggest issue. Ordinary component libraries come with a default style that is not easy to modify. While it is stable to hand over design choices to third parties, it also lacks flexibility. The emergence of unstyled components primarily addresses this problem. The interesting aspect of unstyled components like Radix and Headless UI is that they return the decision-making power of styles back to the developers while managing the issues that UI encounters beyond that.

You can refer to Shadcn🔗 for building component libraries based on various unstyled components.

We often underestimate the details and effort required to create a UI. Next.js Conf 2021 Pedro Duarte🔗 mentioned that just the Dropdown Menu of Radix took an enormous amount of effort to create:

• 2000+ hours
• 6 months
• 50 reviews
• Over 1000 commits