TanStack Start on Vercel

TanStack Start on Vercel is a full-stack React boilerplate built on TanStack Start that bundles file-based routing, route-level data loaders, TanStack Query, TanStack Store, Tailwind CSS, and Vitest into one runnable project. The documentation doubles as onboarding: install with pnpm install, start the dev server with pnpm dev, build for production with pnpm build, and run the test suite with pnpm test.

What is TanStack Start on Vercel?

It is a starter project for building full-stack React applications with the TanStack toolchain, distributed as source files you clone or scaffold rather than as a hosted service. Routes are managed as files under src/routes, styling comes from Tailwind CSS, and tests run through Vitest. The README is the entry point of the project and links out to the TanStack Router, TanStack Query, and TanStack Store documentation for the deeper API details.

What makes it stand out?

• File-based routing — every file added to src/routes becomes a route, and TanStack Router generates the route file contents automatically; you move between routes with the Link component imported from @tanstack/react-router and a to prop such as /about.
• Root layout with Outlet — src/routes/__root.tsx wraps every route, so a shared header and nav mount once and the matched route content renders wherever the Outlet component is placed.
• Route loaders for data fetching — a loader function defined on a route fetches data before the component renders, and the component reads the result through the route's useLoaderData hook, so fetching logic lives next to the route rather than inside the component.
• TanStack Query integration — adding @tanstack/react-query plus @tanstack/react-query-devtools, creating a QueryClient, and wrapping the RouterProvider in a QueryClientProvider enables the useQuery hook with query keys, with optional ReactQueryDevtools mounted in the root route.
• TanStack Store state management — @tanstack/store provides a Store class consumed through the useStore hook, and the Derived class computes state from other stores and requires calling its mount method before derived values start updating.
• Tailwind CSS styling — utility classes are the project's styling system, so no separate CSS-in-JS layer or component library is wired in by default.
• Vitest testing — the project ships with Vitest configured, and the suite runs from a single pnpm test command.
• Deletable demo files — files prefixed with demo exist only as working examples and can be removed safely once you start building your own screens.

Who should use this starter?

• React developers starting a new SPA who want routing, data fetching, and state already chosen and connected instead of assembling each library themselves.
• Teams standardizing on TanStack that need a shared baseline covering Router, Query, and Store in one repository.
• Developers evaluating TanStack Router who want a running app with loaders, a root layout, and devtools to experiment with before committing to the stack.
• Bootcamp or workshop instructors who need a small project that demonstrates file-based routing and loader-based data fetching side by side.

Use cases

• Prototyping a dashboard: add route files under src/routes, point each loader at an API endpoint, and render the response with useLoaderData or useQuery.
• Building a client-side app with server data: use TanStack Query for cached, keyed requests and route loaders for data that must exist before the first paint.
• Learning the TanStack ecosystem: the demo files show a working store, a derived store, a loader, and a query in the same project.
• Adding shared UI: put navigation and layout chrome in src/routes/__root.tsx so it persists across every route.

How does it work?

1. Install dependencies with pnpm install.
2. Run pnpm dev for local development, or pnpm build to produce a production build.
3. Add route files under src/routes; TanStack Router picks them up and generates the route scaffolding.
4. Run pnpm test to execute the Vitest suite.

FAQ

What does this TanStack Start starter include?

It includes TanStack Router with file-based routing under src/routes, route loaders, an optional TanStack Query setup with devtools, TanStack Store for state, Tailwind CSS for styling, and Vitest for tests. Demo-prefixed files are included as editable examples and can be deleted.

Is this an official TanStack project?

It is the standard TanStack Start app scaffold, and its README points to the official TanStack Router, Query, and Store documentation for API reference. The code uses published packages such as @tanstack/react-router, @tanstack/react-query, and @tanstack/store.

How do I add a new page?

Create a new file inside the src/routes directory; TanStack Router generates the route file content for you. Then import the Link component from @tanstack/react-router and point its to prop at the new path, for example /about.

Do I have to use TanStack Query for data fetching?

No. TanStack Query is presented as an addition or alternative to route loading, and the README shows both approaches. Route loaders fetch data before rendering, while useQuery handles keyed requests and caching when you need it.

Can I remove the devtools?

Yes. The TanStack Router devtools component is optional and can be dropped from the root layout, and React Query devtools are only added if you install that package and mount it in the root route.