How to Use Shadcn UI with a React Project

Shadcn UI is a modern and flexible UI component library designed to work seamlessly with React. It provides a set of reusable components that can help you build beautiful and responsive user interfaces quickly. In this blog post, I'll walk you through the steps to integrate Shadcn UI into your React project.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

• Node.js (v12 or higher)
• npm or yarn
• A React project (created using Create React App, Vite, Next.js, or any other setup)

Step 1: Install Shadcn UI

First, you need to install Shadcn UI and its peer dependencies. You can do this using npm or yarn. Open your terminal and navigate to your React project directory, then run the following command:

# Using npm
npm install @shadcn/ui

# Using yarn
yarn add @shadcn/ui

Step 2: Using Shadcn UI Components

Shadcn UI provides a CLI tool to generate components easily. Let's use npx shadcn to add some components to our project.

Adding a Button Component

To add a Button component, run the following command:

npx shadcn add button

This command will generate a Button component in your project. You can now use it in your React components. Here's an example:

// src/App.js
import React from 'react';
import { Button } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
      </header>
    </div>
  );
}

export default App;

Adding a Card Component

To add a Card component, run the following command:

npx shadcn add card

This will generate a Card component. You can use it as follows:

// src/App.js
import React from 'react';
import { Button, Card } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Card>
          <h2>Card Title</h2>
          <p>This is a card component.</p>
          <Button onClick={() => alert('Button inside card clicked!')}>Click Me</Button>
        </Card>
      </header>
    </div>
  );
}

export default App;

Step 3: Customizing Components

Shadcn UI components are highly customizable. You can pass props to customize their appearance and behavior. For example, you can customize the Button component like this:

// src/App.js
import React from 'react';
import { Button, Card } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Card>
          <h2>Card Title</h2>
          <p>This is a card component.</p>
          <Button color="primary" size="large" onClick={() => alert('Button inside card clicked!')}>
            Click Me
          </Button>
        </Card>
      </header>
    </div>
  );
}

export default App;

Conclusion

In this guide, we've seen how to set up Shadcn UI in a React project and how to use its components. Shadcn UI makes it easy to build beautiful and responsive user interfaces with minimal effort. Explore the Shadcn UI documentation for more components and customization options.

Tips for Using Shadcn UI

1. Explore the Documentation: Always refer to the official Shadcn UI documentation for the most up-to-date information on components, customization options, and usage examples.

2. Component Customization: Shadcn UI components are designed to be highly customizable. Make use of props to adjust the appearance and behavior of components to fit your needs.

3. Theming: Utilize the theming capabilities of Shadcn UI to maintain a consistent look and feel across your application. Check the documentation for details on how to implement and customize themes.

4. CLI Tool: Use the npx shadcn CLI tool to quickly add components to your project. This can save you time and ensure that you are using the components correctly.

Thanks for reading!
Po.