A radio button is this: Paul Hebert took at fair look at how Shadcn turns that into 45 lines of code and three imports, which in turn uses Radix which is 215 lines of code and 7 more imports. But do you get better accessibility? No, it’s arguably worse. But do you get ease of […]

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

A critique of shadcn's radio button component, which expands a single HTML input element into 45 lines of code with three imports, built on top of the 215-line, 7-import-heavy RadixUI primitive. The analysis finds no accessibility improvements and no easier styling compared to the native HTML element, raising questions about the value of such abstraction layers.

The Incredible Overcomplexity of the Shadcn Radio Button – Frontend Masters Blog

<p>Totally agree. Almost all of the component-based libraries are bloated. We mostly use Basecoat UI (<a href="https://basecoatui.com/" target="_blank" rel="noopener nofollow">https://basecoatui.com/</a>) for this very reason and either make very small wrappers in Preact or do SSR.</p>


<p>I agree, component libraries like Material UI flood browsers with a hell of a lot of CSS even for simple components. A button that can be styled using a few CSS properties ends up with 30+ lines, some of which are overwritten. Styling becomes a mess; you have to scroll multiple times in DevTools to figure out which <code>background-color</code> property is actually applied. it’s crazy</p>
