Tech Stack

Our recommended stack for building modern React applications.

Core (Required)

These form the foundation of every project.

Why These?

React 18 - Industry standard with concurrent features, automatic batching, and Suspense.

TypeScript - Catches errors at compile time, provides excellent IDE support, and makes code self-documenting. Non-negotiable for professional projects.

Vite - Blazing fast development with native ESM, instant HMR, and optimized production builds. Replaces Create React App.

Tailwind CSS - Utility-first CSS that scales. No context switching between files, consistent design tokens, tiny production bundles.

Recommended

Libraries you'll need in most projects.

UI Components

npx shadcn-ui@latest init
npm install lucide-react

shadcn/ui - Not a component library you install, but components you copy into your project. Built on Radix UI primitives, fully accessible, completely customizable. You own the code.

lucide-react - Beautiful, consistent icons. Tree-shakeable (only imports what you use). Fork of Feather Icons with more icons and active maintenance.

import { Search, Menu, X, ChevronDown } from 'lucide-react';
 
<Button>
  <Search className="h-4 w-4 mr-2" />
  Search
</Button>

State Management

npm install @tanstack/react-query zustand

TanStack Query - Handles everything about server state: caching, background refetching, stale-while-revalidate, optimistic updates, infinite queries. Eliminates most Redux use cases.

Zustand - Minimal, fast client state. No boilerplate, no providers, just simple stores. Perfect for UI state like sidebar open/closed, theme, modals.

Forms & Validation

npm install react-hook-form zod @hookform/resolvers

React Hook Form - Performant forms with minimal re-renders. Uncontrolled inputs by default, but works with controlled too. Excellent DevTools.

Zod - TypeScript-first schema validation. Define once, get type inference and runtime validation. Works everywhere: forms, API responses, environment variables.

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});
 
type FormData = z.infer<typeof schema>; // Types derived automatically

Utilities

npm install clsx tailwind-merge date-fns

clsx + tailwind-merge - Use together as a cn utility for conditional classes that properly merge Tailwind:

// lib/cn.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
 
// Usage
<div className={cn(
  'px-4 py-2 rounded',
  isActive && 'bg-blue-500',
  className // Props can override
)} />

date-fns - Modular date utility library. Import only what you need. Immutable, tree-shakeable, comprehensive.

import { format, formatDistanceToNow } from 'date-fns';
 
format(new Date(), 'MMM d, yyyy');           // "Jan 15, 2026"
formatDistanceToNow(date, { addSuffix: true }); // "3 hours ago"

Notifications

npm install sonner

Sonner - Beautiful toast notifications. Simple API, accessible, customizable, from the Vercel ecosystem.

// Add Toaster to your app root
import { Toaster } from 'sonner';
 
function App() {
  return (
    <>
      <Routes />
      <Toaster position="top-right" richColors />
    </>
  );
}
 
// Use anywhere
import { toast } from 'sonner';
 
toast.success('Changes saved');
toast.error('Something went wrong');
toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Saved!',
  error: 'Failed to save',
});

Routing

npm install react-router-dom

React Router - De facto standard for React routing. Supports nested routes, loaders, actions, and lazy loading.

Optional

Add these based on project requirements.

Data Tables

npm install @tanstack/react-table

TanStack Table - Headless (no UI), handles all table logic. Bring your own components and styling. Powerful but has a learning curve. See Data Table Template.

HTTP Client

npm install axios  # Only if needed

Animation

npm install framer-motion

Framer Motion - Powerful but adds ~30KB. For simple animations, prefer CSS transitions or Tailwind's built-in transitions.

Mobile

npm install @capacitor/core @capacitor/cli

See Mobile section for full setup.

Development Tools

Testing

npm install -D vitest @testing-library/react @testing-library/jest-dom
npm install -D @playwright/test
npm install -D msw

Quick Install

Copy-paste to install all recommended libraries:

# Core (included with Vite template)
npm create vite@latest my-app -- --template react-ts
 
# Recommended
npm install @tanstack/react-query zustand react-router-dom
npm install react-hook-form zod @hookform/resolvers
npm install clsx tailwind-merge date-fns lucide-react sonner
 
# UI Components
npx shadcn-ui@latest init
 
# Dev tools
npm install -D vitest @testing-library/react @testing-library/jest-dom
npm install -D prettier eslint-config-prettier