⚡ React + Vite + TypeScript + Tailwind + shadcn/ui

A starter project using Vite, React, TypeScript, Tailwind CSS, and shadcn/ui components.

---

🚀 Tech Stack

• Vite – Fast build tool
• React – UI library
• TypeScript – Type safety
• Tailwind CSS – Utility-first styling
• shadcn/ui – Re-usable UI components

---

📦 Installation & Setup

1. Create project

npm create vite@latest my-app
# Select: React + TypeScript
cd my-app
npm install

2. Install Tailwind CSS

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

Update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Initialize shadcn/ui

npx shadcn@latest init

• Style: New York (Recommended)
• Base color: Neutral

This generates:

• components.json
• Updates Tailwind config
• Adds src/lib/utils.ts

4. Add components

Example: add a button

npx shadcn@latest add button

This creates: src/components/ui/button.tsx

5. Example usage

In src/App.tsx:

import { Button } from "@/components/ui/button"
function App() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <Button>Click Me</Button>
    </div>
  )
}

export default App

6. Run project

npm run dev

📂 Project Structure

my-app/
├── src/
│   ├── components/
│   │   └── ui/
│   │       └── button.tsx
│   ├── lib/
│   │   └── utils.ts
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── tailwind.config.js
├── postcss.config.js
├── tsconfig.json
└── components.json

✅ Next Steps

Add more shadcn components:

npx shadcn@latest add card input dialog

• Customize theme in tailwind.config.js
• Build your app 🎉

📖 Resources

• @shadcn/ui Docs
• @Tailwind Vite Guide
• @TypeScript Docs

---

🙋‍♂️ Author

Made with ❤️ by Tanmay Shil GitHub: @TanmayShil