Why I Tell Everyone to Use shadcn (or Any Design Library)

I've had this conversation dozens of times. Someone shows me their project, they've spent three days building a button component from scratch, and it still doesn't look quite right.

"I wanted to learn how it works," they say.

I get it. I really do. But there's a better way.

The Real Problem

Here's what usually happens when you build UI from scratch:

1. You spend hours on a dropdown menu
2. It works, but it's not accessible
3. You fix the accessibility, now the animations are janky
4. You fix that, now it doesn't work on mobile
5. Three weeks later, you've built 10% of what shadcn gives you for free

This isn't learning. This is suffering.

What shadcn Actually Is

Let me be clear: shadcn/ui is not a component library. It's a code distribution system.

When you run npx shadcn add button, it doesn't install a package. It copies the actual component code into your project. You own it. You can modify it. It's yours.

This is fundamentally different from libraries like MUI or Chakra where you're fighting against their API to match your design.

Why This Matters

1. You Own the Code

npx shadcn@latest add button

That button is now in your components/ui/button.tsx. Want to change how it looks? Edit the file. No wrapper components. No !important hacks. No "overriding the theme object."

2. It Works With AI

This is huge in 2026. Because shadcn components are just code in your repo, AI tools like Cursor and Copilot can read them, understand them, and extend them.

Try asking an AI to "add a loading state to my button." It'll look at your button component, understand the pattern, and implement it correctly.

3. Consistent API Across Everything

Every shadcn component uses the same patterns:

• Class variance authority for variants
• Composable primitives from Radix
• Tailwind for styling

Once you learn one component, you understand them all.

4. Beautiful Defaults

The components look good out of the box. Not "good for a library" good. Actually good. Someone with taste designed these defaults, and it shows.

The Common Objections

"But I want to learn CSS from scratch!"

Then learn CSS from scratch—on a personal project. But when you're building something real, something that needs to ship, use tools that professionals use.

You don't learn carpentry by making your own hammer.

"Libraries add bloat!"

shadcn adds zero runtime dependencies beyond what you'd use anyway (React, Tailwind). The components are just code. There's no package to install.

"I'll lose control of my design!"

The opposite. You gain control. The code is right there. Change whatever you want.

Making It Yours: tweakcn

Here's the thing about shadcn's default theme—it's intentionally minimal. Gray scale, simple radius, nothing fancy.

That's where tweakcn comes in.

tweakcn is a visual theme editor for shadcn. You tweak colors, radius, shadows, fonts—whatever you want—and it generates the CSS variables for you. Live preview, copy the code, paste into your project.

It supports Tailwind CSS v4 and lets you see your changes in real-time. No more guessing what --primary: 222.2 47.4% 11.2% actually looks like.

If shadcn is the foundation, tweakcn is the paintbrush.

The Workflow I Recommend

1. Start with shadcn - npx shadcn@latest init
2. Add components as needed - npx shadcn@latest add button card dialog
3. Customize the theme - Use tweakcn to find your color palette
4. Modify individual components - When you need something specific, edit the source

This gives you:

• Professional-quality UI in hours, not weeks
• Full ownership of your code
• A consistent design system
• The flexibility to customize anything

The Bottom Line

Your time is valuable. Spend it on what makes your product unique, not on building the 50,000th accessible dropdown menu.

Use shadcn. Make it yours with tweakcn. Ship faster.

This is the advice I give to every developer who asks. It hasn't changed in years, and it probably won't for a while.