Chris Coyier
on
A radio button is this:
<input type="radio" name="foo">Code language: HTML, XML (xml)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 styling? Also no.
React is the web's most popular framework, always topping the charts for JavaScript developers awareness, interest, and satisfaction. Not to mention so many jobs listing it as a requirement these days. We have the best courses on the web for React, including a complete learning path from the best teachers in JavaScript. Access 300+ courses with a Frontend Masters subscription and get 20% off today!
That’s what most of the UI libraries do, unfortunately. On the other hand I have to admin Shadcn is still better than many other solutions 😀
But yea.. that’s why for ecommerce we’ve build storefront-ui: https://docs.storefrontui.io/v2/react/components/radio
If you look at the source code, you’ll see that radio component is just few lines of code: basically a wrapper around native
input[type=radio]with some default styling.In most cases I’d expect users to copy over the source code and just use the ui library as a blueprint. In the end you want to have flexibility in styling. And to be honest – the “hard part” are the more complicated components, like accordion groups, popovers, sliders. Thing like radio should never be overcomplicated