4. ShadCN UI

1. What is ShadCN UI ?

   ShadCN UI is a collection of beautifully designed, fully accessible UI components built using:

   • ✅ Radix UI (for accessible primitives)

   • ✅ Tailwind CSS (for styling)

   • ✅ Variants & Utilities (like cva, tailwind-variants)

   • ✅ Lucide Icons

   • ✅ All components are copied into your codebase — not hidden in a package

You get full control of the code.

2. How it works

   Unlike traditional UI libraries (like MUI or Chakra), ShadCN UI:

   • Doesn't give you a dependency package

   • Instead, gives you the actual component code

   • You own and control all your UI

So you can customize freely without waiting for library updates or hacks.

3. Installation in Next.js

   1. Initialize shadcn

npx shadcn@latest init

2. Adding Component

npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add card
npx shadcn@latest add dialog
// They all will create inside component folder

3. Example : Use a Button

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div className="p-8">
      <Button variant="default">Click me</Button>
    </div>
  );
}

4. Folder Structure after installing shadcn

my-app/
├── components/
│   └── ui/          → ShadCN UI components
│   └── custom/      → Your custom components
├── app/
│   └── layout.tsx
│   └── page.tsx
├── lib/
│   └── utils.ts     → cn utility
├── styles/
│   └── globals.css
├── tailwind.config.ts