Jacob's Guide to

Vite + React + shadcn/ui Setup

Prerequisites

Node.js version 20.19+ or 22.12+ with npm (check with node --version)

1

Create Your App

npm create vite@latest my-app -- --template react-ts
Always use the TypeScript template - shadcn/ui works best with TypeScript
2

Navigate to Project

cd my-app
3

Install Base Dependencies

npm install
4

Install Additional Packages

Add commonly used packages for modern React development: 
npm install lucide-react wouter framer-motion firebase
npm install -D @types/node
5

Add Tailwind CSS

Required for shadcn/ui to work properly: 
npm install tailwindcss @tailwindcss/vite
6

Configure Vite

Replace the contents of 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"),
    },
  },
})
7

Update CSS

Replace everything in src/index.css with: 
@import "tailwindcss";
Delete src/App.css and remove its import from src/App.tsx
8

Configure TypeScript Paths

Update tsconfig.json:
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
Update tsconfig.app.json (add to existing compilerOptions): 
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
9

Initialize shadcn/ui

npx shadcn@latest init
Configuration prompts:
  • Base color: Choose your preference (Neutral, Zinc, etc.)
  • Accept defaults for other settings
10

Add Your First Component

Test shadcn/ui by adding a button component: 
npx shadcn@latest add button

Optional: Firebase Setup

11

Install Firebase CLI

npm install -g firebase-tools
12

Login to Firebase

firebase login
13

Initialize Firebase

firebase init
14

Build and Deploy

npm run build
firebase deploy

Useful Commands

  • npm run dev Start development server
  • npm run build Build for production
  • npm run preview Preview production build locally
  • npx shadcn@latest add [component-name] Add shadcn/ui components
  • firebase deploy Deploy to Firebase Hosting