The Incredible Overcomplexity of the Shadcn Radio Button
The other day I was asked to update the visual design of radio buttons in a web app at work. I figured it couldn't be that complicated. It's just a radio button right?
< input type = " radio " name = " beverage " value = " coffee " />
Boom! Done. Radio buttons are a built-in HTML element. They've been around for 30 years. The browser makes it easy. Time for a coffee.
Enter Shadcn
I dug into our codebase and realized we were using two React components from Shadcn to power our radio buttons:
For those unfamiliar with Shadcn, it's a UI framework that provides a bunch of prebuilt UI components for use in your websites. Unlike traditional UI frameworks like Bootstrap, you don't import it with a script tag or npm install . Instead you run a command that copies the components into your codebase.
Here's the code that was exported from Shadcn into our project:
"use client" ; import * as React from "react" ; import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" ; import { CircleIcon } from "lucide-react" ; import { cn } from "@/lib/utils" ; function RadioGroup ( { className , ... props } : React . ComponentProps < typeof RadioGroupPrimitive . Root > ) { return ( < RadioGroupPrimitive.Root data-slot = " radio-group " className = { cn ( "grid gap-3" , className ) } { ... props } /> ) ; } function RadioGroupItem ( { className , ... props } : React . ComponentProps < typeof RadioGroupPrimitive . Item > ) { return ( < RadioGroupPrimitive.Item data-slot = " radio-group-item " className = { cn ( "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50" , className , ) } { ... props } > < RadioGroupPrimitive.Indicator data-slot = " radio-group-indicator " className = " relative flex items-center justify-center " > < CircleIcon className = " fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 " /> ) ; } export { RadioGroup , RadioGroupItem } ;
Woof... 3 imports and 45 lines of code. And it's importing a third party icon library just to render a circle. (Who needs CSS border-radius or the SVG
... continue reading