Building UIs Faster with shadcn/ui

---

title: "Building UIs Faster with shadcn/ui" date: "2026-05-29" description: "shadcn/ui gives you copy-paste components built on Radix UI and Tailwind. Here's how to use it effectively." tags: ["shadcn/ui", "UI Components", "React"]

shadcn/ui isn't a component library you install as a dependency — it's a collection of components you copy into your project and own completely.

Why shadcn/ui

• No versioning headaches: components live in your codebase
• Fully customizable: tweak styles, logic, and accessibility
• Built on Radix UI: accessible primitives out of the box
• Tailwind-native: classes you already understand

Adding Your First Component

Use the CLI to add components:

npx shadcn@latest add button card badge

This creates the component files directly in src/components/ui/.

Using a Card Component

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function PostCard({ title, description }: { title: string; description: string }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{description}</p>
      </CardContent>
    </Card>
  )
}

Theming

shadcn/ui uses CSS custom properties for theming, which makes dark mode trivial:

:root {
  --primary: oklch(0.205 0 0);
}
.dark {
  --primary: oklch(0.922 0 0);
}

Components automatically adapt when you toggle the dark class on the root element.

Recommended Components to Start With

Component	Use Case
Button	CTAs, form submissions
Card	Content containers
Badge	Tags, status indicators
Dialog	Modals and confirmations
Sheet	Side drawers