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

npx shadcn-ui@latest init

Step 2: Add a Component

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

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

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

Example: Customizing a Button

<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:

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:

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

Dark Mode Support

ShadCN/UI fully supports Tailwind’s dark mode.

Enable Dark Mode in tailwind.config.js

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

Use Dark Mode in Components

<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:

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

To add a new variant, edit the button component:

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} />;
}

1. Using Dialog for Modals

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>
  );
}

1. Creating a Sidebar with Navigation Menu

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.