how to install shadcn ui in react with vite

In this tutorial, we will see how to install shadcn ui in reactjs with typescript using vite tools.

1. First we need to create react project with typescript using vite tool.

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.

"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.

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes (no)

7. Now you can test shadcn ui components in reactjs project. let test button component.

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;