How to Use Shadcn UI in a React App

In this guide, we’ll walk you through setting up Shadcn UI in a React project with TypeScript using Vite. Follow these step-by-step instructions to get started.

Step 1: Create a New React Project

First, create a new React project with TypeScript using Vite:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app

Step 2: Install and Set Up Tailwind CSS

Next, set up Tailwind CSS in your project:

Install the necessary packages:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Configure tsconfig.json

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Step 4: Edit tsconfig.app.json file

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Step 5: Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error.

# (so you can import "path" without error)
npm i -D @types/node

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Step 5: Install Shadcn UI

Now, install Shadcn UI in your project:

npx shadcn-ui@latest init

Step 6: Create and Use a Component

Finally, create a simple component to use Shadcn UI in your app:

npx shadcn-ui@latest add button

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

function App() {
  return (
    <>
      <div className="flex flex-col justify-center items-center gap-2">
        <h1 className="font-bold text-3xl">Add Shadcn UI In React </h1>
        <Button>Read More</Button>
      </div>
    </>
  );
}

export default App;