# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.anandisheladiya.com/skills-and-experience/frontend/shadcn-ui-the-modern-ui-library-for-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.