Back to all posts

Building Reusable Components with shadcn/ui

Learn how to use shadcn/ui to create beautiful, accessible React components

React, UI, shadcn/ui, Component Design

Building Reusable Components with shadcn/ui

Learn how to use shadcn/ui to create beautiful, accessible React components

ReactUIshadcn/uiComponent Design

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
pnpm dlx shadcn-ui@latest init
yarn shadcn-ui@latest init
bunx --bun 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
pnpm dlx shadcn-ui@latest add button
yarn shadcn-ui@latest add button
bunx --bun shadcn-ui@latest add button

Now customize:

1import { Button } from "@/components/ui/button";2
3export function CTA() {4  return (5    <Button variant="outline" size="lg">6      Try for Free 🚀7    </Button>8  );9}

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

Building a Modal

npx shadcn-ui@latest add dialog
pnpm dlx shadcn-ui@latest add dialog
yarn shadcn-ui@latest add dialog
bunx --bun shadcn-ui@latest add dialog

Then:

1import {2  Dialog,3  DialogTrigger,4  DialogContent,5  DialogTitle,6  DialogDescription,7} from "@/components/ui/dialog";8
9export function InfoModal() {10  return (11    <Dialog>12      <DialogTrigger>13        <Button>Open Modal</Button>14      </DialogTrigger>15      <DialogContent>16        <DialogTitle>Heads up!</DialogTitle>17        <DialogDescription>18          This is a fully accessible modal built in seconds.19        </DialogDescription>20      </DialogContent>21    </Dialog>22  );23}

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