why i tell everyone to use shadcn/ui - By Sourav Mishra (@souravvmishra)

i've had this conversation so many times. someone shows me their project, and they spent three days building a custom dropdown menu from scratch—and it still breaks on mobile.

"i wanted to build it myself to learn," they say.

i get it. but honestly? stop reinventing the wheel.

in this post, i, sourav mishra, explain why i recommend shadcn/ui for almost every project.

the real problem with building UI from scratch

here's what happens when you build components from scratch:

1. you spend hours building a modal or dropdown.
2. it looks okay, but keyboard navigation is broken.
3. you fix accessibility, but mobile touch breaks.
4. three weeks later, you still haven't built your actual app.

that isn't learning; that's just suffering.

why shadcn is different

shadcn isn't an npm package you import. it copies the actual source code directly into your components/ folder.

npx shadcn@latest add button

you get full ownership of the code. you can edit the tailwind classes, change the animations, or tweak the logic anytime.

focus on building your product, not debugging button hover states. use shadcn!

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.

Frequently Asked Questions

Q: Is shadcn/ui a component library?

Technically, no. It's a collection of re-usable components that you copy and paste into your apps. You own the code, rather than installing a dependency.

Q: Can I use shadcn with other frameworks?

shadcn/ui is built for React and designed to work best with Next.js. However, there are community ports for Vue, Svelte, and other frameworks.

Q: How do I update shadcn components?

Since you own the code, you update components manually or by running the add command again to see diffs. This prevents breaking changes from upstream updates.

Q: What is the best way to customize shadcn?

Use tweakcn for global theme adjustments (colors, radius) and edit the individual component files in components/ui for structural changes.