🚀 TanStack Starter

A modern React starter with shadcn/ui and Tailwind CSS 4

✨ Features

• TanStack Start - Modern full-stack React framework
• shadcn/ui - Beautiful, accessible component library
• Tailwind CSS v4 - Modern utility-first CSS framework
• TypeScript - Full type safety
• TanStack Router - Type-safe file-based routing

🚀 Quick Start

Prerequisites

• Node.js 18+
• pnpm (recommended package manager)

Installation

# Clone the repository
git clone <your-repo-url>
cd tanstack-starter-instructa

# Install dependencies
pnpm install

# Start development server
pnpm dev

Available Scripts

# Development
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm start        # Start production server

# Code Quality
pnpm biome:check  # Check code formatting and linting
pnpm biome:fix:unsafe # Fix code issues (unsafe)

📁 Project Structure

src/
├── app/
│   ├── routes/           # File-based routing
│   │   ├── __root.tsx   # Root layout
│   │   ├── index.tsx    # Home page
│   │   └── api/         # API routes
│   └── styles/          # Global styles
├── components/
│   └── ui/              # shadcn/ui components
└── utils/               # Utility functions

🎯 Core Technologies

Technology	Purpose	Documentation
TanStack Start	Full-stack framework	Docs
shadcn/ui	Component library	Docs
Tailwind CSS v4	Styling framework	Docs
TypeScript	Type safety	Docs

🔧 Configuration

Adding shadcn/ui Components

# Add new components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input

Tailwind CSS

• Uses Tailwind CSS v4 with modern CSS-first configuration
• Configured in app.config.ts
• Global styles in src/app/styles/

TypeScript

• Path aliases: @ resolves to the root ./ directory
• Route files: Must use .tsx extension

🚀 Deployment

Build for Production

pnpm build

Start Production Server

pnpm start

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ using modern React tools