G1Joshi shadcn/ui
shadcn/ui is not a component library; it's a collection of reusable components that you copy and paste into your apps. Built on Radix UI and Tailwind.
When to Use
- Ownership: You want full control over the component code.
- Next.js: The de facto standard for modern Next.js apps.
- Modern: The "Vercel Aesthetic".
Core Concepts
Copy/Paste
npx shadcn-ui@latest add button. This adds components/ui/button.tsx to YOUR project.
Radix UI
The headless, accessible primitives (Dialog, Tooltip) that power the interactions.
cn Utility
A helper to merge Tailwind classes conditionally (clsx + tailwind-merge).
Best Practices (2025)
Do:
- Customize: Edit the component code! That's the point.
- Use
lucide-react: The standard icon set. - Use Blocks: Copy larger blocks (Login Forms, Dashboards) from the registry.
Don't:
- Don't treat it like MUI: There is no npm package to update. You own the code.