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

5. Example - How to use Dialogue

    'use client'
    // import { Button } from "../ui/button";
    import { Button } from "@/components/ui/button" // install button
    import {
      Dialog,
      DialogClose,
      DialogContent,
      DialogDescription,
      DialogFooter,
      DialogHeader,
      DialogTitle,
      DialogTrigger,
    } from "@/components/ui/dialog" // import this after installing dialogue from shadcn
    import { Input } from "@/components/ui/input" // install input from shadcn 
    import { Label } from "@/components/ui/label"// install label
    import { useState } from "react";
   
    export default function AddNewUser(){
        const[openDialog , setOpenDialouge]= useState(false)
   
        return (
            <div>
                <Button onClick={()=>setOpenDialouge(true)} className='hover:scale-90 cursor-pointer transition-all duration-300'> Add new user</Button>
                 <Dialog open={openDialog} onOpenChange={setOpenDialouge}> // remember how to open and close dialogue
                    <form>
                        <DialogContent className="sm:max-w-[425px]">
                        <DialogHeader>
                            <DialogTitle>Edit profile</DialogTitle> // removed uncessary things
                        </DialogHeader>
                        <div className="grid gap-4">
                            <div className="grid gap-3">
                            <Label htmlFor="name-1">Name</Label>
                            <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
                            </div>
                            <div className="grid gap-3">
                            <Label htmlFor="username-1">Username</Label>
                            <Input id="username-1" name="username" defaultValue="@peduarte" />
                            </div>
                        </div>
                        <DialogFooter>
                            <DialogClose asChild>
                            <Button variant="outline">Cancel</Button>
                            </DialogClose>
                            <Button type="submit">Save changes</Button>
                        </DialogFooter>
                        </DialogContent>
                    </form>
                </Dialog>
            </div>
        )
    }