🚀 Quick Start

Create a new React project in one command:

# npm
npm create react-typescript-kit@latest my-app

# npx
npx create-react-typescript-kit@latest my-app

# pnpm (recommended)
pnpm create react-typescript-kit@latest my-app

# yarn
yarn create react-typescript-kit my-app

Then navigate to your project and start developing:

cd my-app
pnpm install        # or npm install / yarn
pnpm run dev        # starts dev server at http://localhost:5173

✨ Features

This template provides a complete, production-ready setup with modern tooling:

Core Stack

• ⚛️ React 19 - Latest React with Compiler enabled for automatic optimizations
• 📘 TypeScript 5.9 - Full type safety across your entire application
• ⚡ Vite 7 - Lightning-fast HMR and optimized builds
• 🎨 Tailwind CSS 4 - Latest version with improved performance

Routing & Data Fetching

• 🗺️ TanStack Router - Type-safe, file-based routing with built-in code splitting
• 🔄 TanStack Query - Powerful data synchronization and caching
• 🛠️ DevTools - Integrated devtools for Router and Query debugging

UI Components

• 🎭 shadcn/ui Ready - Pre-configured with components.json for easy component installation
• 🎯 Class Variance Authority - Type-safe component variant management
• 🔧 Tailwind Merge & clsx - Intelligent class merging utilities
• 🎨 Lucide React - Beautiful, consistent icon library

Code Quality

• ✅ ESLint - Comprehensive linting with React 19, TypeScript, and TanStack plugin rules
• 💅 Prettier - Consistent code formatting
• 🐶 Husky + lint-staged - Pre-commit hooks for code quality
• 🧪 Vitest - Fast unit testing with browser mode support

Developer Experience

• 🔥 React Compiler - Automatic memoization and optimization
• 📦 pnpm - Fast, disk-efficient package management
• 🎯 Path Aliases - Clean imports with @/ prefix
• 📁 Organized Structure - Logical project structure from day one

📦 What's Included

my-app/
├── public/              # Static assets
├── src/
│   ├── components/      # React components
│   │   └── ui/         # shadcn/ui components
│   ├── hooks/          # Custom React hooks
│   ├── lib/            # Utilities and helpers
│   ├── routes/         # TanStack Router routes
│   ├── App.tsx         # Root component
│   ├── main.tsx        # App entry point
│   └── index.css       # Global styles
├── .husky/             # Git hooks
├── components.json     # shadcn/ui configuration
├── eslint.config.js    # ESLint configuration
├── tsconfig.json       # TypeScript configuration
├── vite.config.ts      # Vite configuration
└── package.json

🛠️ Available Scripts

# Development
pnpm run dev           # Start dev server

# Building
pnpm run build         # Build for production

# Code Quality
pnpm run lint          # Run ESLint
pnpm run preview       # Preview production build

# Testing
pnpm run test:browser  # Run Vitest browser tests

🎯 Usage Examples

Adding shadcn/ui Components

The template is pre-configured for shadcn/ui:

npx shadcn@latest add button
npx shadcn@latest add card

Creating Routes

TanStack Router uses file-based routing. Create a new route:

// src/routes/about.tsx
export function Route() {
  return <div>About Page</div>
}

Data Fetching with TanStack Query

import { useQuery } from '@tanstack/react-query'

function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json())
  })

  if (isLoading) return <div>Loading...</div>
  return <div>{data.name}</div>
}

🔧 Customization

Modify Tailwind Config

Tailwind CSS 4 uses CSS-based configuration in src/index.css:

@theme {
  --color-primary: oklch(0.5 0.2 240);
}

Configure TypeScript

Update tsconfig.json for your needs. Path aliases are configured:

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

📚 Learn More

• React Documentation
• TypeScript Handbook
• Vite Guide
• TanStack Router
• TanStack Query
• Tailwind CSS
• shadcn/ui

🤝 Contributing

Found a bug or have a feature request? Please open an issue on GitHub.

📄 License

MIT License - feel free to use this template for any project!