How to Set Up shadcn/ui in a React App

Modern React applications need well-designed UI components that are flexible, accessible, and easy to customize. Instead of building everything from scratch, developers often use component libraries. One of the most popular modern UI solutions is shadcn/ui. It provides beautifully designed, accessible components that you can copy directly into your project and customize as needed.

In this guide, we’ll learn how to set up shadcn/ui in a React application, install its dependencies, and use your first component.

What is shadcn/ui?

shadcn/ui is not a traditional component library like many others. Instead of installing a large package, it allows you to add individual components directly into your project. Because the components live inside your project, you can edit them whenever needed.

It is built using:

• React
• Tailwind CSS
• Radix UI

Step 1: Create a React App

If you don’t already have a React project, create one.

npm create vite@latest my-app

Install dependencies:

cd my-app
npm install

Start the development server:

npm run dev

Step 2: Install Tailwind CSS

Next, install Tailwind CSS because shadcn/ui uses it for styling.

Install the required packages:

npm install tailwindcss @tailwindcss/vite

Add the @tailwindcss/vite plugin to your Vite configuration.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Add Tailwind import inside your main CSS file.

Open:

src/index.css

Add:

@import "tailwindcss";

Now Tailwind CSS is ready.

Step 3: Install shadcn/ui CLI

Now install the shadcn CLI tool.

npx shadcn@latest init

The CLI will ask several questions. After setup, the CLI will configure your project automatically.

This step also installs dependencies such as:

• Class-variance-authority
• Clsx
• Tailwind-merge
• radix-ui components

Now your project is ready to use shadcn components.

Step 4: Add Your First Component

Now let's add a Button component.

Run:

npx shadcn@latest add button

This command adds the button component to your project.

You will see a new file:

src/components/ui/button.tsx

This file contains the full source code of the button component.

Step 5: Use the Button Component

Now we can use the button inside our React app.

Open:

src/App.tsx

Add the following code:

import { Button } from "./components/ui/button"
function App() {
  return (
    <div className="flex items-center justify-center h-screen">
      <Button>
        Click Me
      </Button>
    </div>
  )
}
export default App

Step 6: Add More Components

You can add more UI components using the CLI.

Add a Card component

npx shadcn@latest add card

Add a Dialog

npx shadcn@latest add dialog

Add an Input

npx shadcn@latest add input

Example: Using a Card Component

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent
} from "./components/ui/card"
export default function App() {
  return (
    <div className="flex justify-center mt-20">
      <Card className="w-80">
        <CardHeader>
          <CardTitle>
            Welcome
          </CardTitle>
        </CardHeader>
        <CardContent>
          This is a shadcn/ui card component.
        </CardContent>
      </Card>
    </div>
  )
}

Setting up shadcn/ui in a React app is simple and gives you access to modern, customizable UI components. Because shadcn/ui gives you full control over the component code, it’s an excellent choice for building modern dashboards, SaaS applications, and scalable React interfaces.

To read more about How to Use Server-Sent Events (SSE) in React, refer to our blog How to Use Server-Sent Events (SSE) in React.