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:

Choose your setup (Tailwind, Typescript, etc.), and you’re good to go.

Creating a Custom Button

Let’s add a button component:

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

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 render={<Button />}>Open Modal</DialogTrigger>13      <DialogContent>14        <DialogTitle>Heads up!</DialogTitle>15        <DialogDescription>16          This is a fully accessible modal built in seconds.17        </DialogDescription>18      </DialogContent>19    </Dialog>20  );21}

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