shadcn/ui vs Tailwind CSS

# Initialize
npx shadcn@latest init

# Add the components you need
npx shadcn@latest add button dialog form

# Components live in /components/ui — you own them
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent } from "@/components/ui/dialog"

export function MyModal({ open, onClose }) {
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent>
        <Button onClick={onClose}>Close</Button>
      </DialogContent>
    </Dialog>
  );
}

# Install (Tailwind v4)
npm install tailwindcss @tailwindcss/vite

# Use in components
export function Button({ children }) {
  return (
    <button className="
      inline-flex items-center gap-2
      px-4 py-2 rounded-full
      bg-indigo-600 text-white text-sm font-semibold
      hover:bg-indigo-700 transition-colors shadow-sm
    ">
      {children}
    </button>
  );
}