The Overcomplexity of the Shadcn Radio Button
4 months ago
- #UI frameworks
- #simplicity
- #web development
- The author was tasked with updating the visual design of radio buttons in a web app.
- Discovered the app was using Shadcn, a UI framework that provides prebuilt components by copying them into the codebase.
- Shadcn's radio button implementation involves two React components, importing from Radix and a third-party icon library, totaling 45 lines of code.
- Radix is another UI framework that provides unstyled components, which Shadcn then styles.
- The Radix implementation uses ARIA attributes to mimic radio button behavior instead of using native HTML elements, contrary to the First Rule of ARIA.
- The author questions the complexity, noting that styling radio buttons with CSS is straightforward and doesn't require JavaScript or additional dependencies.
- The author provides a simple CSS example for styling radio buttons without any frameworks or libraries.
- While acknowledging the convenience of component libraries, the author advocates for simplicity and using native browser elements where possible.
- The complexity of using multiple libraries for a simple radio button adds unnecessary cognitive load, potential bugs, and impacts website performance.
- The author nostalgically reflects on the simplicity of native HTML radio buttons.