If you’re building a modern React app with Tailwind CSS and want great-looking components without spending hours designing them from scratch, ShadCN/UI is a game-changer.
In this blog, I’ll walk you through how to set it up and use it — even if you’ve never touched it before. By the end, you’ll have beautiful, accessible UI components ready to go.
What is ShadCN/UI?
ShadCN is not a component library, it’s a collection of pre-built components you can copy into your own project.
You get full control — the styles live in your codebase, and everything uses Tailwind CSS under the hood.
Think of it like this:
It gives you a head start, but you still own everything.
Why Use ShadCN?
- Built with Tailwind CSS
- Uses Radix UI for accessibility and logic
- Easy to customize
- Clean design out of the box
- You’re not stuck with a black-box library
Step 1: Prerequisites
Before installing ShadCN, make sure your project uses:
- React
- Tailwind CSS
- TypeScript (recommended)
You can start with a clean setup using Next.js if you like:
npx create-next-app my-app -e with-tailwindcss Step 2: Install ShadCN
Run the following command to install the CLI:
npx shadcn-ui@latest init The CLI will ask you a few setup questions like:
- Project type (Next.js, Vite, etc.)
- Tailwind config location
- Preferred color mode (light, dark, system)
Once done, it sets up everything you need: config files, folder structure, and a theme.
Step 3: Add a Component
Let’s say you want to add a button. Just run:
npx shadcn-ui@latest add button It will copy the button component into your project’s /components/ui/ folder.
That’s it! Now you can use it:
import { Button } from "@/components/ui/button";
export default function Home() {
return <Button>Click Me</Button>;
}
Step 4: Customize Your Way
Since the component lives in your code, you can:
- Change the styles
- Add variants
- Rewrite it completely
No more struggling with overriding library styles!
Pro Tips
- Use add to install more components like modals, inputs, alerts, etc.
- All components are built on Radix UI, so they’re fully accessible.
- Update your tailwind.config.js with custom colors to match your brand.
- Follow the official ShadCN site for design ideas: https://ui.shadcn.dev
Conclusion
ShadCN/UI is perfect if you:
- Love Tailwind CSS
- Want full control over your components
- Hate bloated UI libraries
- Care about accessibility
It’s like having a designer on your team who speaks Tailwind.
Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency.