Stop Installing Component Libraries. Start Building One with shadcn/ui | Blog

If you've built a React application in the last few years, you know the drill. You start a new project, and one of your first decisions is, "Which component library should I install?" You weigh the pros and cons of Material-UI, Chakra UI, or Ant Design, run npm install, and immediately inherit a large package dependency with its own opinions, styling conventions, and limitations.

What if we’ve been thinking about it all wrong?

Enter shadcn/ui, a project that has taken the React ecosystem by storm by challenging the very idea of a traditional component library. The most important thing to understand is this: shadcn/ui is not a component library.

It's a collection of reusable, beautifully designed components that you don't install. You copy and paste them directly into your project. And trust me, it’s a game-changer.

The Big Idea: You Own the Code

Let's get this straight. You don't go to your terminal and type npm install shadcn-ui. It doesn't work that way.

Instead, shadcn/ui gives you a command-line tool (CLI). Want a button? You run a command like npx shadcn-ui@latest add button. This doesn't link to a package in your node_modules folder. It physically creates a button.tsx file right inside your project's components folder.

It’s your button now. You own it. You can change the colors, the size, the logic, the variants—anything you want—without fighting against the library's pre-defined styles or wrestling with !important CSS overrides.

This simple shift from installing to owning is the core philosophy that makes shadcn/ui so powerful.

The Building Blocks: Built on the Shoulders of Giants

shadcn/ui doesn't reinvent the wheel; it intelligently combines the best-in-class tools for styling and accessibility:

Tailwind CSS: All components are styled with Tailwind CSS, the utility-first CSS framework that developers love. This means customization is incredibly intuitive. You're not learning a new styling API; you're just using Tailwind classes, which you probably already know.
Radix UI: Under the hood, shadcn/ui uses Radix for behavior and accessibility. Radix provides unstyled, highly accessible primitive components (like dropdowns, dialogs, and checkboxes). shadcn/ui simply adds a beautiful Tailwind-based style on top of Radix's rock-solid foundation, so you get great design and WAI-ARIA compliance out of the box.

Why This Approach is So Refreshing

So, why is everyone so excited about this?

Total Control: Since the component code lives in your project, you have the final say on everything. You can refactor it, add or remove variants, and make it fit your project's exact needs.
No Unnecessary Bloat: Traditional libraries come with dozens of components, even if you only need a few. This adds to your app's bundle size. With shadcn/ui, you only add the specific components you need, keeping your application light and fast.
Stop Fighting the Framework: There are no complex APIs to learn or weird style overrides to hack together. You just edit the component file like any other React component you've written yourself.
It Helps You Build Your Own Design System: shadcn/ui is the perfect starting point for creating a bespoke design system for your company or project. You get beautifully crafted components as a foundation, which you can then adapt to your brand's unique look and feel.

How to Get Started

Getting up and running is surprisingly simple. In your React project (typically a Next.js app), you'll use the shadcn/ui CLI to initialize the setup. It will ask you a few questions about how your project is structured (e.g., where to put components) and configure your tailwind.config.js for you.

From there, you just use the add command whenever you need a new component:

# First, initialize it in your project
npx shadcn-ui@latest init

# Now, add the components you need
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog