Building Reusable Components with shadcn/ui

If you're like me and get tired of reinventing buttons every week, shadcn/ui is the breath of fresh air you didn’t know you needed.

It gives you a head-start with fully accessible, styled components powered by Tailwind CSS—perfect for React + Next.js projects.

Let’s build a clean, reusable button and modal using it.

Why shadcn/ui?

• It’s component-driven, not framework-driven.
• You get complete control over styling.
• Built with Radix UI primitives under the hood.
• Easily composable and theme-friendly.

Installation

Start by setting it up in your Next.js or Vite project:

npx shadcn-ui@latest init
Choose your setup (Tailwind, Typescript, etc.), and you’re good to go.

Creating a Custom Button Let’s add a button component:

npx shadcn-ui@latest add button

Now customize:

import { Button } from "@/components/ui/button";

export function CTA() {
  return (
    <Button variant="outline" size="lg">
      Try for Free 🚀
    </Button>
  );
}

It’s already styled, keyboard-accessible, and supports dark mode. No need for extra fuss.

Building a Modal

npx shadcn-ui@latest add dialog

Then:

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";

export function InfoModal() {
  return (
    <Dialog>
      <DialogTrigger>
        <Button>Open Modal</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle>Heads up!</DialogTitle>
        <DialogDescription>
          This is a fully accessible modal built in seconds.
        </DialogDescription>
      </DialogContent>
    </Dialog>
  );
}

Make It Yours Since you own the source code, you can tweak the theme, transitions, spacing, or add animations with Framer Motion.

Conclusion shadcn/ui bridges the gap between design systems and developer flexibility. Whether you're prototyping or building production UIs, it’s the fastest way I’ve found to stay consistent and creative.

Resources

• shadcn/ui
• shadcn/ui Docs
• shadcn/ui GitHub
• shadcn/ui Blocks