• Shadcn/ui is not a component library. It is how you build your component library.
• You don't need to install the entire package and import the components like you do in traditional way, instead you will only install the component you want.
• And the best part is it will install the component’s code into your codebase, that way you have all the freedom to customize it how ever you want to fit into your design system.
• Read the get started docs for more on shadcn https://ui.shadcn.com/docs

Quick start

Installation and the process: https://ui.shadcn.com/docs/installation/next

1. Initialize an empty nextjs project.

2. Initialize shadcn

   npx shadcn@latest init
   

3. It will install some dependencies, lets talk about this one.

   Class-Variance-Authority

   https://cva.style/docs

   • CVA is a small library that helps you manage “variants” of CSS classes in components.
   • Shadcn uses this library to create different variants of a component like theme, size, variant etc..

4. It will create a file libs/utils.ts

   import { clsx, type ClassValue } from "clsx"
   import { twMerge } from "tailwind-merge"
   
   export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
   }
   

   • This small function does a lot of things using the help of these two libraries
     • clsx : basically takes a mix values like array, object, string and converts it into a clean, space separated string for constructing className.
     • tailwind-merge : while writing tailwind utilities it is common to accidentally include multiple conflicting utilities (e.g., p-2 p-4, accidentally used both) so tailwind-merge resolves this by removing earlier conflicting classes, and keeping the last applicable one (i.e p-4).
   • what main use case did I learn from this?

     • for a conditional rendering in a react component I use to do like this

       className = ` bg-red-400 ${isActive ? "bg-red-600" : ""} ${isDisabled ? "opacity-50 : ""}
       

     • now I can just do like this using this cn function

       className = {cn("bg-red-400", isActive && "bg-red-600", isDisabled && "opacity-50"
       

     • Making it easier to read by getting rid of template literals.

5. It will create a components.json file

   • Think of it as the configuration file for the shadcn CLI, It tells the CLI:
     • Where to put generated components
     • How to style them
     • What conventions to follow (aliases, naming, tailwind config location, etc.)

6. It will create overwrite global.css file

   • By default it will use light theme so you might see your nextjs project go from dark theme to light theme. you can change this by theme-provider which is provided in the docs. https://ui.shadcn.com/docs/dark-mode/next

7. Now lets add a component, its as simple as installing a package from CLI

   npx shadcn@latest add button
   

   • This will add button.tsx at @components/ui/button.tsx

8. Just import the component where you want and use it https://ui.shadcn.com/docs/installation/next

   import { Button } from "@/components/ui/button"
   
   export default function Home() {
     return (
       <div>
         <Button>Click me</Button>
       </div>
     )
   }
   //you can use varients, size to tweak the component