Roast: shadcn/ui
So, you’ve decided to roast the golden child of the React ecosystem. The repository that convinced a generation of developers that CTRL+C, CTRL+V is a valid architectural pattern.
Here is the brutal truth about shadcn-ui/ui:
1. It's Not a Library™, It's a Chore
The README loves to scream "This is NOT a component library." You’re right, it’s not. A library comes with versioning, updates, and someone else to blame when things break. shadcn/ui is just a fancy way of saying, "Here’s 50 files, good luck maintaining them."
You don’t install this package; you adopt it. You run one command, and suddenly your components/ui folder looks like a graveyard of files you are too afraid to touch.
2. The cn() Fetish
The entire foundation of this "architecture" rests on a single, three-line utility function in lib/utils.ts.
typescript
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Congratulations. You built an entire brand around wrapping clsx and tailwind-merge. This function is doing more heavy lifting than the entire Vercel marketing team.
3. Radix UI Doing All the Real Work
Let’s be honest: shadcn/ui is just Radix UI wearing a Uniqlo t-shirt.
Radix did all the hard work—handling focus traps, ARIA attributes, and keyboard navigation. Shad just slapped some ring-offset-background classes on it and took all the GitHub stars. It’s the open-source equivalent of the guy who repeats your joke louder and gets the laugh.
4. The "New York" vs. "Default" Identity Crisis
Why do I need to choose between "Default" and "New York" style? What does that even mean?
- Default: "I use Tailwind."
- New York: "I use Tailwind, but I also want my font size to be 1px smaller so I look like a serious SaaS founder."
5. components.json: The Receipt of Shame
You have a config file (components.json) just to track which files you copy-pasted. It’s like keeping the receipt for a stolen TV. It sits there, watching you, reminding you that your "custom design system" is just npx shadcn@latest add button over and over again.
6. The "Vercel Clone" Aesthetic
Because of this repo, every single indie hacker project launched in the last two years looks exactly the same. The internet is drowning in 14px Inter font, slate-900 text, and slightly rounded corners. We get it, you want to be acquired.
Summary:
shadcn/ui is perfect if you want to feel like you're "owning your code" while actually just outsourcing your design decisions to a CLI tool. It’s the IKEA of frontend: it looks nice, it’s cheap, but you have to assemble it yourself, and you’ll definitely have leftover screws (unused props) at the end.
Verdict: 10/10 would copy-paste again.