> For the complete documentation index, see [llms.txt](https://www.anandisheladiya.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.anandisheladiya.com/skills-and-experience/frontend/shadcn-ui-the-modern-ui-library-for-react.md).

# ShadCN/UI – The Modern UI Library for React

### **Introduction**

**ShadCN/UI** is a minimal yet highly customizable UI component library designed for **React** applications. Unlike traditional component libraries, it focuses on **local components**, meaning you **own** the components and can modify them as needed. It leverages **Tailwind CSS** and **Radix UI** primitives, making it perfect for modern web apps.

### **Why Choose ShadCN/UI?**

* **No Vendor Lock-in** – The components are copied to your project, so you have **full control**.
* **Fully Customizable** – Modify every part of the UI using **Tailwind CSS**.
* **Minimal & Lightweight** – No unnecessary dependencies or bloat.
* **Based on Radix UI** – Ensures **accessibility**, **performance**, and **UX best practices**.
* **Supports Dark Mode** – Works with Tailwind’s `dark:` mode classes.
* **TypeScript Support** – Provides full TypeScript support for safer development.

### **Installation**

**Prerequisites:** Make sure you have **Next.js** and **Tailwind CSS** installed.

**Step 1: Install ShadCN/UI CLI**

```bash
npx shadcn-ui@latest init
```

**Step 2: Add a Component**

```bash
npx shadcn-ui@latest add button
```

This command copies the **Button** component to your project inside `components/ui`.

### **Basic Usage**

Once installed, you can use components **just like regular React components**.

**Example: Using a Button**

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

export default function Example() {
  return <Button variant="outline">Click Me</Button>;
}
```

**Example: Customizing a Button**

```tsx
<Button className="bg-blue-500 text-white hover:bg-blue-600">
  Custom Button
</Button>
```

Since the components are in your project, you can modify them freely!

### Available Components

| Component       | Description                    |
| --------------- | ------------------------------ |
| Button          | Customizable buttons           |
| Card            | Flexible card layout           |
| Dialog          | Pop-up modal for inter         |
| Dropdown        | Custom dropdown menus          |
| Input           | Styled input fields            |
| Checkbox        | Custom checkboxes              |
| Tooltip         | Small UI hints on hover        |
| Tab             | Tabbed navigation              |
| Alert Dialog    | Confirmation & warning dialogs |
| Navigation Menu | Responsive navigation system   |

### **Theming & Customization**

**Modify Tailwind Theme** in `tailwind.config.js`:

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#4F46E5", // Custom primary color
      },
    },
  },
};

```

**Apply Custom Theme to Components**\
Since you own the components, just edit them directly! Example:

```tsx
export function Button({ className, ...props }) {
  return (
    <button
      className={`bg-primary text-white px-4 py-2 rounded-md ${className}`}
      {...props}
    />
  );
}

```

### **Dark Mode Support**&#x20;

ShadCN/UI **fully supports Tailwind’s dark mode**.

**Enable Dark Mode in `tailwind.config.js`**

```javascript
module.exports = {
  darkMode: "class", // Enables dark mode support
};

```

**Use Dark Mode in Components**

```tsx
<Card className="bg-white dark:bg-gray-900">
  <p className="text-black dark:text-white">Dark Mode Ready</p>
</Card>

```

### **Advanced Features**

#### **1. Creating Custom Variants**

You can easily add more button styles:

```tsx
<Button variant="destructive">Danger</Button>
```

To add a new **variant**, edit the button component:

```tsx
export function Button({ variant = "default", ...props }) {
  const variants = {
    default: "bg-primary text-white",
    outline: "border border-gray-300 text-black",
    destructive: "bg-red-500 text-white",
  };
  return <button className={variants[variant]} {...props} />;
}

```

2. **Using Dialog for Modals**

```tsx
import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog";

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <p>This is a modal pop-up.</p>
      </DialogContent>
    </Dialog>
  );
}

```

3. **Creating a Sidebar with Navigation Menu**

```tsx
import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from "@/components/ui/navigation-menu";

export default function Sidebar() {
  return (
    <NavigationMenu>
      <NavigationMenuItem>
        <NavigationMenuLink href="/">Home</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="/about">About</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenu>
  );
}

```

**Use ShadCN/UI if you want:**

* Full control over your UI components
* Tailwind CSS for styling
* A minimal but powerful component library

### **Conclusion**

ShadCN/UI is a game-changer for developers who want **customizable UI components** without the constraints of traditional libraries. It’s the **best choice** if you’re building **modern, fast, and scalable** React applications using Tailwind CSS.

**Key Takeaways:**

* **Own your components** – No external dependencies.
* **Highly customizable** – Tailwind-based styling.
* **Performance-focused** – No unnecessary overhead.
* **Great DX (Developer Experience)** – Simple and intuitive.