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 (
Click me
// or with variants
Outline Button
Delete
)

Example with Card:

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



My Title
My description