How to Use Shadcn ui in a Next.js App ?

esrafil — Sun, 19 Jul 2026 07:11:56 +0000

What is Shadcn UI?

Explanation:

Shadcn UI is a collection of beautiful, accessible components. But it's different from other UI libraries:

Not a dependency - You copy the code directly into your project
You own the code - You can modify anything
Built on Radix UI - Accessible components
Styled with Tailwind CSS - Uses your Tailwind config

How to Install Shadcn UI

Run this command in your terminal:

npx shadcn@latest init

select base(recommended)

After initialization, it creates:

components.json - Configuration file
lib/utils.ts - Helper functions
Updates your globals.css

How to Use It ?

Search in shadcn document to find components to use in your project. For example if you want to use button component: Write in your Terminal:

npx shadcn@latest add button

This adds the Button component to components/ui/button.tsx

You can also Add more components:
npx shadcn@latest add card npx shadcn@latest add input npx shadcn@latest add dialog npx shadcn@latest add navbar

How to Use a Component

In your component:
Import it:
import { Button } from "@/components/ui/button"

And then use it like this:

return (
    <Button>Click me</Button>
    // or with variants
    <Button variant="outline">Outline Button</Button>
    <Button variant="destructive">Delete</Button>
  )

Example with Card:

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


<Card>
  <CardHeader>
    <CardTitle>My Title</CardTitle>
    <CardDescription>My description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Main content here</p>
  </CardContent>
  <CardFooter>
    <p>Footer</p>
  </CardFooter>
</Card>

DEV Community: esrafil

How to Use Shadcn ui in a Next.js App ?

What is Shadcn UI?

How to Install Shadcn UI

How to Use It ?

How to Use a Component