Modern React template for 2026

Adrian Sudbury — Thu, 01 Jan 2026 13:34:14 +0000

TypeScript, Vite, Accessibility, and Quality - Done Properly

Starting a new React project still means answering the same questions every time:

Vite or something else? How strict should TypeScript be?
Which router?
How do we enforce quality without slowing everyone down?
When do we "get around" to accessibility?

💡 After repeating this process often, I built 'Modern React Template'

What This Template Is

Modern React Template is an opinionated starting point built on a modern, proven stack:

✅ React 19
✅ Vite
✅ TypeScript (strict)
✅ TanStack Router for type-safe routing
✅ TanStack Query for server state
✅ Vitest + Playwright for testing

It's not a framework and it's not a demo. It's a solid baseline you can confidently use for real applications.

Why I Built It

Most React templates fall into one of two extremes:

Too minimal - you spend days adding linting, testing, routing, and quality tooling.

Too heavy - you spend days ripping things out before you can even start.

This template aims for the middle ground:

Modern defaults
Strong opinions where they matter
No unnecessary abstractions
Easy to customise or scale back

⚡ Everything included is there because it solves a problem most projects eventually hit.

What's Included Out of the Box

This template includes the things many teams add later - already wired together:

✅ Type-safe routing and navigation
✅ Global error boundary with a custom fallback
✅ 404 handling
✅ Strict ESLint + Prettier setup
✅ Conventional commits via Commitlint + Husky
✅ Unused file and dependency detection with Knip
✅ Unit and end-to-end testing
✅ Optional CI integrations ( CodeQL scanning, SonarCloud, TypeDoc)

🎯 Getting started is deliberately simple: No magic. No ceremony.

Accessibility as a First-Class Concern

Accessibility isn't something to "add later".

This template is designed to help you meet WCAG 2.2 AA expectations from day one:

✅ Semantic HTML patterns
✅ Focus management
✅ Automated accessibility checks using axe-core
✅ Component structure that encourages accessible defaults

🛡 Goal: Don't introduce accessibility problems in the first place.

Quality Tooling That Supports Developers

Good tooling should catch issues early without slowing anyone down.

Included:

✅ ESLint + Prettier for consistent standards
✅ Vitest for fast, focused unit tests
✅ Playwright for real end-to-end confidence
✅ Knip to keep the codebase lean over time

🔑 Focus: Predictability, confidence, and maintainability - not perfect scores.

A Structure That Scales

The project structure is intentionally boring - and that's a feature:

✅ Clear separation of concerns
✅ Predictable routing
✅ Centralised error handling
✅ Natural place for server state, UI state, and side effects

🚀 New developers can onboard quickly because nothing is surprising.

Optional Features (That Stay Optional)

Some integrations are included but disabled by default:

✅ CodeQL code analysis
✅ GitHub Pages deployment
✅ SonarCloud analysis
✅ TypeDoc documentation generation

If you don't need them, they won't clutter your CI.
If you do need them, they're already set up correctly.

Who This Template Is For

This template is a good fit if you:

Build TypeScript-first React apps
Prefer Vite over heavier tooling
Care about accessibility from day one
Want strong testing without friction
Value boring, explicit architecture over clever abstractions

Final Thoughts

Modern React Template isn't trying to be trendy or clever.
It's opinionated where it needs to be, flexible where it should be, and focused on helping developers build robust, accessible applications without wasting time on setup.

⚡ If you care about strong foundations, this template should save you time - and future frustration.

✨ I see this template evolving (if anyone is interested!)

👉 Repository: Modern React Template

DEV Community: Adrian Sudbury