Install Shadcn UI in a React Project using Vite

This guide will show you how to set up Shadcn UI in your React project with TypeScript using Vite. We’ll walk you through the installation process step-by-step.

1. Let’s create a new React project with TypeScript using Vite.

npm create vite@latest

2. We need to install & setup tailwind css in your reactjs project.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

3. Edit tsconfig.json Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error.

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

4. Update vite.config.ts Add the code below 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

vite.config.ts

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"),
    },
  },
})

5. Install shadcn ui in your reactjs project.

npx shadcn-ui@latest init

6. Configure components.json You will be asked a few questions to configure components.json.

npx shadcn-ui@latest add button

App.tsx

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">Vite + React + TypeScript + Shadcn UI</h1>
      <Button>Shadcn UI Button</Button>
      <Button variant="outline">Shadcn UI Button</Button>
      </div>
    </>
  );
}

export default App;

Aaronn