Stop 13 · UI LibrariesTopics · 2/7

Shadcn UI

In short

shadcn/ui isn't a package you install and forget. It copies the component code into your project, so you can read it, change it and own it completely.

A collection of copy-paste React components (built on Radix UI + Tailwind) that you own and customize directly in your codebase, rather than installing as a black-box package.

The jaadu receives a stitched shirt and a paper sewing pattern from a tailor.

Think of it like this

Your tailor's stitched pattern

A readymade shirt from a shop is fixed. Your tailor instead hands you a well-cut shirt plus the paper pattern, and you can take in the sleeves whenever you like. shadcn gives you the shirt and the pattern.

Watch it happen

From CLI to your own component

init

add button

button.tsx

Your edits

Your page

1/5npx shadcn@latest init sets up components.json, the cn() helper and theme CSS variables in your project.

The big ideas

What you need to know

Copy, don't import

npx shadcn@latest add button writes button.tsx into components/ui. It's your file now.

Built on solid pieces

Components use Tailwind for styling and accessible primitives (like Radix UI) for behaviour such as focus and keyboard support.

Variants with cva

Buttons get variants like default, outline and ghost through a small helper called class-variance-authority.

Theme with CSS variables

Colours like --primary live in your global CSS, so changing the theme means editing a few variables.

See it in code

Walk through the code

bash

1# One-time setup in a Next.js + Tailwind project2npx shadcn@latest init3 4# Add only the components you need5npx shadcn@latest add button dialog input6 7# Then use them like your own code8# import { Button } from "@/components/ui/button";9# <Button variant="outline" size="sm">Edit</Button>

1/3init prepares the project: config file, utils and CSS variables for the theme.

Open components/ui/button.tsx after adding it. Reading that file teaches you more about good component design than most tutorials.

Save yourself the pain

Common mistakes

Oops

Running add again later and overwriting your custom changes.

Do this instead

Commit before re-adding a component, and review the diff so your edits don't vanish.

Oops

Expecting npm update to bring new shadcn fixes.

Do this instead

There's no package to update. You pull improvements manually, which is the price of owning the code.

Your mission

Make a shadcn component yours

~30 min

Quick check

What makes shadcn/ui different from libraries like MUI or Chakra?

Go deeper

1Add a couple of shadcn/ui components to a Tailwind project and inspect the generated code.
2Customize a component's styling directly, since you own the source.
3Compare this 'copy the code in' model to traditional npm component libraries.