Radio buttons are built into web browsers. Why are we using a UI library that wraps another UI library that rebuilds radio buttons from scratch? Why does rendering a radio button require multiple dependencies and several kilobytes of JavaScript? How did we make a built-in browser control so complicated?

Lobsters is a community-driven platform for sharing and discussing links to articles, tutorials, and projects related to technology and programming. Readers can learn about a wide range of topics, from software development and system administration to cybersecurity and artificial intelligence. With user submissions, comments, and voting, Lobsters provides a platform for collaborative learning and knowledge sharing among technology enthusiasts.

Lobsters

Modern UI libraries like Shadcn and Radix add significant complexity to simple HTML radio buttons, requiring multiple dependencies, hundreds of lines of React code, and several kilobytes of JavaScript. These libraries rebuild radio buttons from scratch using buttons with ARIA attributes instead of native HTML inputs, despite the fact that radio buttons can be easily styled with basic CSS techniques like `appearance: none`, pseudo-elements, and pseudo-classes. This overcomplexity violates ARIA best practices, increases cognitive load, and degrades performance for a feature browsers have supported natively for 30 years.

The Incredible Overcomplexity of the Shadcn Radio Button

Styling radio buttons is hard (Wait, is it?)

I'm not trying to convince you to write your own component styles

I read “The Incredible Overcomplexity of the Shadcn Radio Button” and wanted to give me 2 cents.
You intentionally avoid CSS at the beginning of the post in the “native” example, leaving the default browser radios, the gray, 1998 looking ones. There is CSS later at the bottom, but skipping it upfront makes the comparison feel unfair. Let’s be real: nobody ships native radios like that anymore.
In practice, you end up writing a fair amount of CSS anyway, and then you still fight Chrome vs Firefox vs Safari inconsistencies.
“Native” isn’t a holy grail.
Yes, zero JS sounds nice on paper, but shadcn radios give you:
<ul>
<li>Easy customization</li>
<li>Accessibility</li>
<li>Design system level consistency</li>
<li>Simple styling with Tailwind</li>
</ul>
Shadcn trades a bit of abstraction for components you can drop in, style instantly (if you want), and trust won’t fall apart once you add dark mode, disabled states, or form validation.
Minimalism is cool, but shipping native UI isn’t simple, it’s just painful.
Shadcn hits a solid balance. ⚔️
Good luck rebuilding all of that yourself with “native” components.

I literally made a comment yesterday about how stupid shadcn is on <a href="https://app.daily.dev/orcdev" data-mention-id="pWEhX8JhjnUQB2l4CNVSW" data-mention-username="orcdev" translate="no">@orcdev</a> on a post which says “just use shadcn”
thank you so much for this!

Wait, they are not using the standard radio button ? I sometimes get scared of the complexity those libraries hide…

React… and almost everything around it… is KK!!

Many Shadcn component are complete crap and some are completely built over 3rd party crap pulled from the internet. I was shocked to see these.