ShadCN UI is a modern UI component library built for React applications. It provides a sleek design system and highly customizable components that make it easy for developers to build consistent and attractive user interfaces. In this blog, we’ll cover how to install ShadCN UI and demonstrate its usage in a project.

Why Choose ShadCN UI?

ShadCN UI stands out due to its:

• Design Consistency: Ensures a cohesive look and feel across all components.
• Customizability: Allows developers to tailor components to specific project needs.
• Ease of Integration: Compatible with popular React frameworks like Next.js.

Installing ShadCN UI

To get started, follow these steps:

Step 1: Install the Library

Run the following command to add ShadCN UI to your project:

npm install shadcn-ui

Or, if you’re using Yarn:

yarn add shadcn-ui

Step 2: Configure Tailwind CSS

ShadCN UI works seamlessly with Tailwind CSS. If you don’t have Tailwind CSS installed, set it up by running:

npx tailwindcss init

Update your tailwind.config.js file to include ShadCN UI’s configuration:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/shadcn-ui/dist/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 3: Import Styles

Add ShadCN UI’s base styles to your main CSS file:

@import "shadcn-ui/dist/styles.css";

Using ShadCN UI Components

Once installed, you can start using ShadCN UI components in your project. Here’s an example of how to use a Button component:

Example: Button Component

import { Button } from 'shadcn-ui';

export default function App() {
  return (
    <div className="p-4">
      <Button variant="primary">Click Me</Button>
    </div>
  );
}

Example: Card Component

import { Card } from 'shadcn-ui';

export default function Dashboard() {
  return (
    <div className="grid gap-4">
      <Card>
        <h2 className="text-xl font-bold">Welcome</h2>
        <p>Explore the new dashboard.</p>
      </Card>
    </div>
  );
}

Customizing ShadCN UI

One of the strengths of ShadCN UI is its flexibility. You can customize the default styles and themes to align with your project’s branding.

Overriding Default Styles

You can override the default Tailwind classes in your tailwind.config.js file. For example:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4A90E2',
      },
    },
  },
};

Custom Variants

Create custom variants for components by extending the default configuration. For instance, to add a warning variant to the Button component:

import { Button } from 'shadcn-ui';

export default function App() {
  return (
    <Button className="bg-yellow-500 text-white">Warning</Button>
  );
}

Best Practices for Using ShadCN UI

1. Leverage Component Documentation: Explore ShadCN UI’s official documentation to unlock the full potential of its components.
2. Keep Components Modular: Ensure that UI logic is encapsulated within components for better maintainability.
3. Optimize for Performance: Use Tailwind’s purge options to eliminate unused styles in production.
4. Collaborate on Design Tokens: Use design tokens to ensure alignment between developers and designers.