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 ) Enter fullscreen mode Exit fullscreen mode Example with Card: import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" My Title My description Main content here Footer Enter fullscreen mode Exit fullscreen mode