Set Up a Modern React + TypeScript + Tailwind + ShadCN UI App with Vite

This guide walks through a complete setup to  to kick off a modern React project with TypeScript, Tailwind CSS, and the sleek ShadCN UI components by Vite build tool from zero to productive in minutes.

---

🛠️ Step-by-Step Project Setup

1. Initialize the Vite Project

Start by creating a new Vite project:

npm create vite@latest

When prompted:

• Project Name: project_name
• Framework: React
• Variant: TypeScript

---

2. Install Tailwind CSS

Install Tailwind CSS and the official Vite plugin:

npm install tailwindcss @tailwindcss/vite

Create or update src/index.css:

@import "tailwindcss";

It may also want to run:

npx tailwindcss init

Configure tailwind.config.js as needed.

---

3. Set Up Path Aliases

In tsconfig.json, add:

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

Also update tsconfig.app.json similarly:

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

Install Node type definitions:

npm install -D @types/node

---

4. Configure Vite

Create or edit vite.config.ts:

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})

---

🎨 Add ShadCN UI

Initialize ShadCN:

npx shadcn@latest init

Choose the preferred neutral color scheme when prompted.

Add a component, like the button, to test it out:

npx shadcn@latest add button

---

✅ Test the Setup

Use the imported Button component in the app:

import { Button } from "./components/ui/button"
function App() {
return <Button>Test</Button>
}
export default App

Start the dev server:

npm run dev

There should now see a fully styled ShadCN button rendered in the browser.