Core App & Routing

  • react-router — Classic client routing, v6+ is clean.
  • @tanstack/router — Data APIs + type-safe routes.
  • wouter — Super tiny router for micro-apps.
  • next — Hybrid SSR/ISR/SPA; still “React,” just frameworked.

Install:

pnpm add react-router-dom @tanstack/react-router

Data Fetching, Caching & State

  • @tanstack/react-query — Gold standard for server state, retries, and caching.
  • swr — Lean fetch + revalidation.
  • zustand — Tiny global store (practical, simple).
  • redux + @reduxjs/toolkit — Middleware/enterprise patterns.
  • jotai — Atomic, minimal state.
  • valtio — Proxy-based with a mutable feel.
  • recoil — Graph-ish atom/selectors.

Tip: Use React Query for server state and Zustand/Jotai for UI/local state. Don’t over-invest in Redux unless you need its middleware ecosystem.

Forms & Validation

  • react-hook-form — Blazing fast and controlled where it matters.
  • formik — Mature and predictable.
  • zod — Schema + TS inference (🔥).
  • yup — Stable alternative to zod.
  • @hookform/resolvers — The glue between RHF and zod/yup.

Install:

pnpm add react-hook-form zod @hookform/resolvers

UI Kits & Headless Primitives

  • @radix-ui/react — Low-level accessibility (a11y) primitives.
  • shadcn/ui — Radix + Tailwind components you “copy in.”
  • headlessui — Tailwind-friendly headless components.
  • react-aria / react-stately — Robust a11y + state models.
  • chakra-ui / mantine / mui / antd — Full design systems (pick one).
  • vaul — Radix-based drawers.

Tables, Data Grids & Virtualization

  • @tanstack/react-table — Headless table engine.
  • ag-grid — An enterprise monster (filtering, pivoting, Excel vibes).
  • @mui/x-data-grid — Integrated with the MUI design system.
  • react-window / react-virtualized / @tanstack/react-virtual — For high-performance huge lists.

Charts & Visualization

  • recharts — Friendly and composable.
  • nivo — Pretty and themable.
  • victory — Stable with good primitives.
  • visx — Low-level power (D3-ish).
  • echarts-for-react — For gnarly dashboards.

Editors, Rich Text & Content

  • tiptap — Based on ProseMirror, with a rich plugin ecosystem and collab-ready.
  • slate — Highly flexible editor toolkit.
  • lexical — Modern and fast (from Meta).
  • react-markdown — Renders Markdown to React.
  • @uiw/react-codemirror / monaco-editor — Code editors.

Drag & Drop, Canvas & Graphs

  • @dnd-kit/core — Modern DnD (sortable, sensors, overlays).
  • react-beautiful-dnd — Ideal for board/column flows (legacy but solid).
  • react-flow — Node/graph editors, perfect for builders.
  • react-zoom-pan-pinch — Canvas zoom/pan functionality.

Performance, Polish & Observability

  • framer-motion — Crisp animations.
  • react-error-boundary — Fail gracefully.
  • @sentry/react — Error and performance monitoring.
  • react-use / usehooks-ts — Grab-n-go custom hooks.
  • react-intersection-observer — Lazy rendering and visibility detection.
  • why-did-you-render — Re-render debugging.

Internationalization (i18n) & Accessibility

  • react-i18next — The workhorse for i18n.
  • react-intl (formatjs) — Supports ICU message syntax.
  • ariakit — Accessible components.

Auth, Security & RBAC

  • next-auth — Providers and sessions (can be used beyond Next.js).
  • oidc-client-ts — For SPA OIDC flows.
  • jose — JWT tooling.
  • casl — Permissions/authorization rules.
  • react-helmet-async — A safe way to manage the document <head>.

Dates, Numbers & Utilities

  • date-fns — Modular date utilities.
  • dayjs — A tiny, Moment.js-like library.
  • luxon — Handles timezones and durations well.
  • numbro / numeral — Numeric formatting.
  • lodash-es / radash — General-purpose utility kits.

File Uploads, Media & Documents

  • react-dropzone — Upload UI + Drag & Drop.
  • uppy — Resumable, multi-source uploads.
  • react-image-crop — Image cropping.
  • browser-image-compression — Client-side image compression.
  • react-pdf — Render PDFs.
  • pdf-lib — Generate or modify PDFs.

Networking & Real-time

  • axios / ky — HTTP clients.
  • socket.io-client — Real-time events.
  • @tanstack/query-persist-client — Offline cache.
  • msw — Mock APIs for local development and testing.

Maps & Geospatial

  • react-leaflet — Open-source maps.
  • @react-google-maps/api — Google Maps wrapper.
  • react-map-gl (Mapbox GL) — Polished and performant.

Payments & Commerce

  • @stripe/stripe-js + @stripe/react-stripe-js — Stripe Elements.
  • @paypal/react-paypal-js — PayPal SDK wrapper.
  • sslcommerz / razorpay — Regional gateways (Bangladesh/India).

Docs, Exports & Office Files

  • xlsx — Excel import/export.
  • papaparse — CSV parsing and generation.
  • jspdf — Quick PDFs (invoices, receipts).
  • docx — Generate .docx files.

Feature Flags, Config & Type-Safe Guardrails

  • launchdarkly-js-client-sdk / unleash-proxy-client — Managed feature flags.
  • zod — Runtime schema validation + TS inference.
  • ts-pattern — Exhaustive pattern-matching.

Analytics & Product Insights

  • posthog-js — Product analytics (OSS-friendly).
  • rudder-sdk-js — Open-source Segment-style router.
  • analytics (by Segment) — A unified analytics API.

Testing & QA

  • vitest — Fast unit tests.
  • jest — The classic ecosystem.
  • @testing-library/react — Test user behavior, not internals.
  • cypress / playwright — End-to-end (E2E) testing.
  • axe-core / jest-axe — Accessibility testing.
  • storybook — Component workbench.
  • chromatic — Visual regression testing (Storybook cloud).

Build, Bundling & Monorepo

  • vite — Dev server + bundler (fast af).
  • tsup / unbuild — Library bundling.
  • rollup — Battle-tested for libraries.
  • nx / turborepo — Monorepo task runner/cache.
  • changesets — Versioning and releases at scale.
  • pnpm — Workspaces + blazing-fast installs.

DevX: Linting, Formatting, Git Hygiene

  • eslint + @typescript-eslint — Lint TypeScript the right way.
  • prettier — Consistent formatting.
  • husky + lint-staged — Pre-commit sanity checks.
  • dotenv-flow — Layered environment variables per stage.

AI & Chat UI (Optional)

  • ai (Vercel AI SDK) — Streaming chat patterns (UI hooks).
  • langchain (frontend bits) — Orchestration client.
  • react-chat-elements / react-chat-ui — Quick chat UIs.