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

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>
  )

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode