diff --git a/README.md b/README.md
index 87a79f9..9fd81df 100644
--- a/README.md
+++ b/README.md
@@ -12,13 +12,14 @@ It helps users understand that a new page or content is being loaded, making nav
## Packages
-| Package | Lien | Changelog |
-| ----------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
-| **Core** | [@bprogress/core](https://www.npmjs.com/package/@bprogress/core) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/core/CHANGELOG.md) |
-| **React** | [@bprogress/react](https://www.npmjs.com/package/@bprogress/react) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/react/CHANGELOG.md) |
-| **Next.js** | [@bprogress/next](https://www.npmjs.com/package/@bprogress/next) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/next/CHANGELOG.md) |
-| **Remix** | [@bprogress/remix](https://www.npmjs.com/package/@bprogress/remix) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/remix/CHANGELOG.md) |
-| **Vue** | [@bprogress/vue](https://www.npmjs.com/package/@bprogress/vue) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/vue/CHANGELOG.md) |
+| Package | Lien | Changelog |
+| -------------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
+| **Core** | [@bprogress/core](https://www.npmjs.com/package/@bprogress/core) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/core/CHANGELOG.md) |
+| **React** | [@bprogress/react](https://www.npmjs.com/package/@bprogress/react) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/react/CHANGELOG.md) |
+| **Next.js** | [@bprogress/next](https://www.npmjs.com/package/@bprogress/next) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/next/CHANGELOG.md) |
+| **Remix** | [@bprogress/remix](https://www.npmjs.com/package/@bprogress/remix) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/remix/CHANGELOG.md) |
+| **TanStack Router** | [@bprogress/tanstack-router](https://www.npmjs.com/package/@bprogress/tanstack-router) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/tanstack-router/CHANGELOG.md) |
+| **Vue** | [@bprogress/vue](https://www.npmjs.com/package/@bprogress/vue) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/vue/CHANGELOG.md) |
## Documentation
diff --git a/apps/docs/content/docs/meta.json b/apps/docs/content/docs/meta.json
index 8234bbf..6d0375e 100644
--- a/apps/docs/content/docs/meta.json
+++ b/apps/docs/content/docs/meta.json
@@ -34,6 +34,7 @@
"react",
"next",
"remix",
+ "tanstack-router",
"vue",
"---More---",
"roadmap",
diff --git a/apps/docs/content/docs/tanstack-router/components/progress-provider.mdx b/apps/docs/content/docs/tanstack-router/components/progress-provider.mdx
new file mode 100644
index 0000000..a2fd080
--- /dev/null
+++ b/apps/docs/content/docs/tanstack-router/components/progress-provider.mdx
@@ -0,0 +1,18 @@
+---
+title: ProgressProvider
+description: The main provider component for TanStack Router progress bar
+---
+
+## Import
+
+```tsx
+import { ProgressProvider } from '@bprogress/tanstack-router';
+```
+
+## Usage
+
+```tsx
+
+ ...
+
+```
diff --git a/apps/docs/content/docs/tanstack-router/installation.mdx b/apps/docs/content/docs/tanstack-router/installation.mdx
new file mode 100644
index 0000000..9eb0b74
--- /dev/null
+++ b/apps/docs/content/docs/tanstack-router/installation.mdx
@@ -0,0 +1,48 @@
+---
+title: Installation
+description: Install BProgress in your TanStack Router application
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { SiNpm } from 'react-icons/si';
+import { FaGithub } from 'react-icons/fa6';
+
+## Installation
+
+To install BProgress, run the following command:
+
+
+ ```bash npm install @bprogress/tanstack-router ```
+ ```bash pnpm add @bprogress/tanstack-router ```
+ ```bash yarn add @bprogress/tanstack-router ```
+ ```bash bun add @bprogress/tanstack-router ```
+
+
+Now you are ready to use BProgress in your TanStack Router application!
+
+
+ This package works with both:
+ - **TanStack Router** (SPA mode)
+ - **TanStack Start** (SSR/SSG mode)
+
+
+## Links
+
+
+ }
+ >
+ Check the package on NPM
+
+ }
+ >
+ Check the repository on GitHub
+
+
diff --git a/apps/docs/content/docs/tanstack-router/meta.json b/apps/docs/content/docs/tanstack-router/meta.json
new file mode 100644
index 0000000..ba774a7
--- /dev/null
+++ b/apps/docs/content/docs/tanstack-router/meta.json
@@ -0,0 +1,14 @@
+{
+ "title": "TanStack Router",
+ "root": false,
+ "pages": [
+ "---Guide---",
+ "installation",
+ "quick-start",
+ "---Components---",
+ "components/progress-provider",
+ "../react/components/progress-components",
+ "---Hooks---",
+ "../react/hooks/use-progress"
+ ]
+}
diff --git a/apps/docs/content/docs/tanstack-router/quick-start.mdx b/apps/docs/content/docs/tanstack-router/quick-start.mdx
new file mode 100644
index 0000000..6cb42c9
--- /dev/null
+++ b/apps/docs/content/docs/tanstack-router/quick-start.mdx
@@ -0,0 +1,75 @@
+---
+title: Quick Start
+description: Get started with BProgress for TanStack Router
+---
+
+## Import
+
+```tsx
+import { ProgressProvider } from '@bprogress/tanstack-router';
+```
+
+## Usage
+
+`` must be **inside** ``.
+
+```tsx
+
+ ...
+
+```
+
+## Example
+
+In both setups, `__root.tsx` is rendered as a child of ``.
+
+### TanStack Router (SPA)
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { ProgressProvider } from '@bprogress/tanstack-router'
+
+export const Route = createRootRoute({
+ component: RootComponent,
+});
+
+function RootComponent() {
+ return (
+
+
+
+ );
+}
+```
+
+### TanStack Start (SSR)
+
+```tsx title="src/routes/__root.tsx"
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { ProgressProvider } from '@bprogress/tanstack-router'
+
+export const Route = createRootRoute({
+ head: () => ({ meta: [...], links: [...] }),
+ component: RootComponent,
+})
+
+function RootComponent({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+```
+
+
+ The provider uses `` from `@tanstack/react-router` internally in SSR, so the same usage works in both SPA and TanStack Start.
+
diff --git a/apps/tanstack-start-app/.cta.json b/apps/tanstack-start-app/.cta.json
new file mode 100644
index 0000000..6da2b02
--- /dev/null
+++ b/apps/tanstack-start-app/.cta.json
@@ -0,0 +1,15 @@
+{
+ "projectName": "tanstack-start-app",
+ "mode": "file-router",
+ "typescript": true,
+ "tailwind": false,
+ "packageManager": "pnpm",
+ "git": true,
+ "install": true,
+ "addOnOptions": {},
+ "version": 1,
+ "framework": "react-cra",
+ "chosenAddOns": [
+ "start"
+ ]
+}
\ No newline at end of file
diff --git a/apps/tanstack-start-app/.gitignore b/apps/tanstack-start-app/.gitignore
new file mode 100644
index 0000000..6221ecb
--- /dev/null
+++ b/apps/tanstack-start-app/.gitignore
@@ -0,0 +1,13 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+count.txt
+.env
+.nitro
+.tanstack
+.wrangler
+.output
+.vinxi
+todos.json
diff --git a/apps/tanstack-start-app/README.md b/apps/tanstack-start-app/README.md
new file mode 100644
index 0000000..ce99cca
--- /dev/null
+++ b/apps/tanstack-start-app/README.md
@@ -0,0 +1,290 @@
+Welcome to your new TanStack app!
+
+# Getting Started
+
+To run this application:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+# Building For Production
+
+To build this application for production:
+
+```bash
+pnpm build
+```
+
+## Testing
+
+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
+
+```bash
+pnpm test
+```
+
+## Styling
+
+This project uses CSS for styling.
+
+
+
+
+## Routing
+This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
+
+### Adding A Route
+
+To add a new route to your application just add another a new file in the `./src/routes` directory.
+
+TanStack will automatically generate the content of the route file for you.
+
+Now that you have two routes you can use a `Link` component to navigate between them.
+
+### Adding Links
+
+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
+
+```tsx
+import { Link } from "@tanstack/react-router";
+```
+
+Then anywhere in your JSX you can use it like so:
+
+```tsx
+About
+```
+
+This will create a link that will navigate to the `/about` route.
+
+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
+
+### Using A Layout
+
+In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `` component.
+
+Here is an example layout that includes a header:
+
+```tsx
+import { Outlet, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+import { Link } from "@tanstack/react-router";
+
+export const Route = createRootRoute({
+ component: () => (
+ <>
+
+
+
+
+
+ >
+ ),
+})
+```
+
+The `` component is not required so you can remove it if you don't want it in your layout.
+
+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
+
+
+## Data Fetching
+
+There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
+
+For example:
+
+```tsx
+const peopleRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: "/people",
+ loader: async () => {
+ const response = await fetch("https://swapi.dev/api/people");
+ return response.json() as Promise<{
+ results: {
+ name: string;
+ }[];
+ }>;
+ },
+ component: () => {
+ const data = peopleRoute.useLoaderData();
+ return (
+
+ {data.results.map((person) => (
+
{person.name}
+ ))}
+
+ );
+ },
+});
+```
+
+Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
+
+### React-Query
+
+React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
+
+First add your dependencies:
+
+```bash
+pnpm add @tanstack/react-query @tanstack/react-query-devtools
+```
+
+Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
+
+```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// ...
+
+const queryClient = new QueryClient();
+
+// ...
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+
+ root.render(
+
+
+
+ );
+}
+```
+
+You can also add TanStack Query Devtools to the root route (optional).
+
+```tsx
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const rootRoute = createRootRoute({
+ component: () => (
+ <>
+
+
+
+ >
+ ),
+});
+```
+
+Now you can use `useQuery` to fetch your data.
+
+```tsx
+import { useQuery } from "@tanstack/react-query";
+
+import "./App.css";
+
+function App() {
+ const { data } = useQuery({
+ queryKey: ["people"],
+ queryFn: () =>
+ fetch("https://swapi.dev/api/people")
+ .then((res) => res.json())
+ .then((data) => data.results as { name: string }[]),
+ initialData: [],
+ });
+
+ return (
+
+
+ {data.map((person) => (
+
{person.name}
+ ))}
+
+
+ );
+}
+
+export default App;
+```
+
+You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
+
+## State Management
+
+Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
+
+First you need to add TanStack Store as a dependency:
+
+```bash
+pnpm add @tanstack/store
+```
+
+Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
+
+```tsx
+import { useStore } from "@tanstack/react-store";
+import { Store } from "@tanstack/store";
+import "./App.css";
+
+const countStore = new Store(0);
+
+function App() {
+ const count = useStore(countStore);
+ return (
+
+
+
+ );
+}
+
+export default App;
+```
+
+One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
+
+Let's check this out by doubling the count using derived state.
+
+```tsx
+import { useStore } from "@tanstack/react-store";
+import { Store, Derived } from "@tanstack/store";
+import "./App.css";
+
+const countStore = new Store(0);
+
+const doubledStore = new Derived({
+ fn: () => countStore.state * 2,
+ deps: [countStore],
+});
+doubledStore.mount();
+
+function App() {
+ const count = useStore(countStore);
+ const doubledCount = useStore(doubledStore);
+
+ return (
+
+
+
Doubled - {doubledCount}
+
+ );
+}
+
+export default App;
+```
+
+We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
+
+Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
+
+You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
+
+# Demo files
+
+Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
+
+# Learn More
+
+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
diff --git a/apps/tanstack-start-app/package.json b/apps/tanstack-start-app/package.json
new file mode 100644
index 0000000..645d811
--- /dev/null
+++ b/apps/tanstack-start-app/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "tanstack-start-app",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite dev --port 3000",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@tanstack/react-devtools": "^0.7.0",
+ "@tanstack/react-router": "^1.132.0",
+ "@tanstack/react-router-devtools": "^1.132.0",
+ "@tanstack/react-router-ssr-query": "^1.131.7",
+ "@tanstack/react-start": "^1.132.0",
+ "@tanstack/router-plugin": "^1.132.0",
+ "lucide-react": "^0.561.0",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0",
+ "vite-tsconfig-paths": "^6.0.2"
+ },
+ "devDependencies": {
+ "@tanstack/devtools-vite": "^0.3.11",
+ "@testing-library/dom": "^10.4.0",
+ "@testing-library/react": "^16.2.0",
+ "@types/node": "^22.10.2",
+ "@types/react": "^19.2.0",
+ "@types/react-dom": "^19.2.0",
+ "@vitejs/plugin-react": "^5.0.4",
+ "jsdom": "^27.0.0",
+ "typescript": "^5.7.2",
+ "vite": "^7.1.7",
+ "vitest": "^3.0.5",
+ "web-vitals": "^5.1.0"
+ }
+}
\ No newline at end of file
diff --git a/apps/tanstack-start-app/public/favicon.ico b/apps/tanstack-start-app/public/favicon.ico
new file mode 100644
index 0000000..a11777c
Binary files /dev/null and b/apps/tanstack-start-app/public/favicon.ico differ
diff --git a/apps/tanstack-start-app/public/logo192.png b/apps/tanstack-start-app/public/logo192.png
new file mode 100644
index 0000000..fc44b0a
Binary files /dev/null and b/apps/tanstack-start-app/public/logo192.png differ
diff --git a/apps/tanstack-start-app/public/logo512.png b/apps/tanstack-start-app/public/logo512.png
new file mode 100644
index 0000000..a4e47a6
Binary files /dev/null and b/apps/tanstack-start-app/public/logo512.png differ
diff --git a/apps/tanstack-start-app/public/manifest.json b/apps/tanstack-start-app/public/manifest.json
new file mode 100644
index 0000000..078ef50
--- /dev/null
+++ b/apps/tanstack-start-app/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "TanStack App",
+ "name": "Create TanStack App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/apps/tanstack-start-app/public/robots.txt b/apps/tanstack-start-app/public/robots.txt
new file mode 100644
index 0000000..e9e57dc
--- /dev/null
+++ b/apps/tanstack-start-app/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/apps/tanstack-start-app/public/tanstack-circle-logo.png b/apps/tanstack-start-app/public/tanstack-circle-logo.png
new file mode 100644
index 0000000..9db3e67
Binary files /dev/null and b/apps/tanstack-start-app/public/tanstack-circle-logo.png differ
diff --git a/apps/tanstack-start-app/public/tanstack-word-logo-white.svg b/apps/tanstack-start-app/public/tanstack-word-logo-white.svg
new file mode 100644
index 0000000..b6ec508
--- /dev/null
+++ b/apps/tanstack-start-app/public/tanstack-word-logo-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/tanstack-start-app/src/App.css b/apps/tanstack-start-app/src/App.css
new file mode 100644
index 0000000..74b5e05
--- /dev/null
+++ b/apps/tanstack-start-app/src/App.css
@@ -0,0 +1,38 @@
+.App {
+ text-align: center;
+}
+
+.App-logo {
+ height: 40vmin;
+ pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .App-logo {
+ animation: App-logo-spin infinite 20s linear;
+ }
+}
+
+.App-header {
+ background-color: #282c34;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ color: white;
+}
+
+.App-link {
+ color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/apps/tanstack-start-app/src/components/Header.css b/apps/tanstack-start-app/src/components/Header.css
new file mode 100644
index 0000000..77047bf
--- /dev/null
+++ b/apps/tanstack-start-app/src/components/Header.css
@@ -0,0 +1,18 @@
+.header {
+ padding: 0.5rem;
+ display: flex;
+ gap: 0.5rem;
+ background-color: #fff;
+ color: #000;
+ justify-content: space-between;
+}
+
+.nav {
+ display: flex;
+ flex-direction: row;
+}
+
+.nav-item {
+ padding: 0 0.5rem;
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/apps/tanstack-start-app/src/components/Header.tsx b/apps/tanstack-start-app/src/components/Header.tsx
new file mode 100644
index 0000000..ad790db
--- /dev/null
+++ b/apps/tanstack-start-app/src/components/Header.tsx
@@ -0,0 +1,31 @@
+import { Link } from '@tanstack/react-router'
+
+import './Header.css'
+
+export default function Header() {
+ return (
+
+
+
+ )
+}
diff --git a/apps/tanstack-start-app/src/data/demo.punk-songs.ts b/apps/tanstack-start-app/src/data/demo.punk-songs.ts
new file mode 100644
index 0000000..bc6086d
--- /dev/null
+++ b/apps/tanstack-start-app/src/data/demo.punk-songs.ts
@@ -0,0 +1,13 @@
+import { createServerFn } from '@tanstack/react-start'
+
+export const getPunkSongs = createServerFn({
+ method: 'GET',
+}).handler(async () => [
+ { id: 1, name: 'Teenage Dirtbag', artist: 'Wheatus' },
+ { id: 2, name: 'Smells Like Teen Spirit', artist: 'Nirvana' },
+ { id: 3, name: 'The Middle', artist: 'Jimmy Eat World' },
+ { id: 4, name: 'My Own Worst Enemy', artist: 'Lit' },
+ { id: 5, name: 'Fat Lip', artist: 'Sum 41' },
+ { id: 6, name: 'All the Small Things', artist: 'blink-182' },
+ { id: 7, name: 'Beverly Hills', artist: 'Weezer' },
+])
diff --git a/apps/tanstack-start-app/src/logo.svg b/apps/tanstack-start-app/src/logo.svg
new file mode 100644
index 0000000..fe53fe8
--- /dev/null
+++ b/apps/tanstack-start-app/src/logo.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/apps/tanstack-start-app/src/routeTree.gen.ts b/apps/tanstack-start-app/src/routeTree.gen.ts
new file mode 100644
index 0000000..e7618de
--- /dev/null
+++ b/apps/tanstack-start-app/src/routeTree.gen.ts
@@ -0,0 +1,240 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as DemoBprogressRouteImport } from './routes/demo/bprogress'
+import { Route as DemoStartServerFuncsRouteImport } from './routes/demo/start.server-funcs'
+import { Route as DemoStartApiRequestRouteImport } from './routes/demo/start.api-request'
+import { Route as DemoApiNamesRouteImport } from './routes/demo/api.names'
+import { Route as DemoStartSsrIndexRouteImport } from './routes/demo/start.ssr.index'
+import { Route as DemoStartSsrSpaModeRouteImport } from './routes/demo/start.ssr.spa-mode'
+import { Route as DemoStartSsrFullSsrRouteImport } from './routes/demo/start.ssr.full-ssr'
+import { Route as DemoStartSsrDataOnlyRouteImport } from './routes/demo/start.ssr.data-only'
+
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoBprogressRoute = DemoBprogressRouteImport.update({
+ id: '/demo/bprogress',
+ path: '/demo/bprogress',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoStartServerFuncsRoute = DemoStartServerFuncsRouteImport.update({
+ id: '/demo/start/server-funcs',
+ path: '/demo/start/server-funcs',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoStartApiRequestRoute = DemoStartApiRequestRouteImport.update({
+ id: '/demo/start/api-request',
+ path: '/demo/start/api-request',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoApiNamesRoute = DemoApiNamesRouteImport.update({
+ id: '/demo/api/names',
+ path: '/demo/api/names',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoStartSsrIndexRoute = DemoStartSsrIndexRouteImport.update({
+ id: '/demo/start/ssr/',
+ path: '/demo/start/ssr/',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoStartSsrSpaModeRoute = DemoStartSsrSpaModeRouteImport.update({
+ id: '/demo/start/ssr/spa-mode',
+ path: '/demo/start/ssr/spa-mode',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoStartSsrFullSsrRoute = DemoStartSsrFullSsrRouteImport.update({
+ id: '/demo/start/ssr/full-ssr',
+ path: '/demo/start/ssr/full-ssr',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoStartSsrDataOnlyRoute = DemoStartSsrDataOnlyRouteImport.update({
+ id: '/demo/start/ssr/data-only',
+ path: '/demo/start/ssr/data-only',
+ getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '/demo/bprogress': typeof DemoBprogressRoute
+ '/demo/api/names': typeof DemoApiNamesRoute
+ '/demo/start/api-request': typeof DemoStartApiRequestRoute
+ '/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
+ '/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
+ '/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
+ '/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute
+ '/demo/start/ssr/': typeof DemoStartSsrIndexRoute
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '/demo/bprogress': typeof DemoBprogressRoute
+ '/demo/api/names': typeof DemoApiNamesRoute
+ '/demo/start/api-request': typeof DemoStartApiRequestRoute
+ '/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
+ '/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
+ '/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
+ '/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute
+ '/demo/start/ssr': typeof DemoStartSsrIndexRoute
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport
+ '/': typeof IndexRoute
+ '/demo/bprogress': typeof DemoBprogressRoute
+ '/demo/api/names': typeof DemoApiNamesRoute
+ '/demo/start/api-request': typeof DemoStartApiRequestRoute
+ '/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
+ '/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
+ '/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
+ '/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute
+ '/demo/start/ssr/': typeof DemoStartSsrIndexRoute
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | '/'
+ | '/demo/bprogress'
+ | '/demo/api/names'
+ | '/demo/start/api-request'
+ | '/demo/start/server-funcs'
+ | '/demo/start/ssr/data-only'
+ | '/demo/start/ssr/full-ssr'
+ | '/demo/start/ssr/spa-mode'
+ | '/demo/start/ssr/'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/'
+ | '/demo/bprogress'
+ | '/demo/api/names'
+ | '/demo/start/api-request'
+ | '/demo/start/server-funcs'
+ | '/demo/start/ssr/data-only'
+ | '/demo/start/ssr/full-ssr'
+ | '/demo/start/ssr/spa-mode'
+ | '/demo/start/ssr'
+ id:
+ | '__root__'
+ | '/'
+ | '/demo/bprogress'
+ | '/demo/api/names'
+ | '/demo/start/api-request'
+ | '/demo/start/server-funcs'
+ | '/demo/start/ssr/data-only'
+ | '/demo/start/ssr/full-ssr'
+ | '/demo/start/ssr/spa-mode'
+ | '/demo/start/ssr/'
+ fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ DemoBprogressRoute: typeof DemoBprogressRoute
+ DemoApiNamesRoute: typeof DemoApiNamesRoute
+ DemoStartApiRequestRoute: typeof DemoStartApiRequestRoute
+ DemoStartServerFuncsRoute: typeof DemoStartServerFuncsRoute
+ DemoStartSsrDataOnlyRoute: typeof DemoStartSsrDataOnlyRoute
+ DemoStartSsrFullSsrRoute: typeof DemoStartSsrFullSsrRoute
+ DemoStartSsrSpaModeRoute: typeof DemoStartSsrSpaModeRoute
+ DemoStartSsrIndexRoute: typeof DemoStartSsrIndexRoute
+}
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo/bprogress': {
+ id: '/demo/bprogress'
+ path: '/demo/bprogress'
+ fullPath: '/demo/bprogress'
+ preLoaderRoute: typeof DemoBprogressRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo/start/server-funcs': {
+ id: '/demo/start/server-funcs'
+ path: '/demo/start/server-funcs'
+ fullPath: '/demo/start/server-funcs'
+ preLoaderRoute: typeof DemoStartServerFuncsRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo/start/api-request': {
+ id: '/demo/start/api-request'
+ path: '/demo/start/api-request'
+ fullPath: '/demo/start/api-request'
+ preLoaderRoute: typeof DemoStartApiRequestRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo/api/names': {
+ id: '/demo/api/names'
+ path: '/demo/api/names'
+ fullPath: '/demo/api/names'
+ preLoaderRoute: typeof DemoApiNamesRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo/start/ssr/': {
+ id: '/demo/start/ssr/'
+ path: '/demo/start/ssr'
+ fullPath: '/demo/start/ssr/'
+ preLoaderRoute: typeof DemoStartSsrIndexRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo/start/ssr/spa-mode': {
+ id: '/demo/start/ssr/spa-mode'
+ path: '/demo/start/ssr/spa-mode'
+ fullPath: '/demo/start/ssr/spa-mode'
+ preLoaderRoute: typeof DemoStartSsrSpaModeRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo/start/ssr/full-ssr': {
+ id: '/demo/start/ssr/full-ssr'
+ path: '/demo/start/ssr/full-ssr'
+ fullPath: '/demo/start/ssr/full-ssr'
+ preLoaderRoute: typeof DemoStartSsrFullSsrRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo/start/ssr/data-only': {
+ id: '/demo/start/ssr/data-only'
+ path: '/demo/start/ssr/data-only'
+ fullPath: '/demo/start/ssr/data-only'
+ preLoaderRoute: typeof DemoStartSsrDataOnlyRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ DemoBprogressRoute: DemoBprogressRoute,
+ DemoApiNamesRoute: DemoApiNamesRoute,
+ DemoStartApiRequestRoute: DemoStartApiRequestRoute,
+ DemoStartServerFuncsRoute: DemoStartServerFuncsRoute,
+ DemoStartSsrDataOnlyRoute: DemoStartSsrDataOnlyRoute,
+ DemoStartSsrFullSsrRoute: DemoStartSsrFullSsrRoute,
+ DemoStartSsrSpaModeRoute: DemoStartSsrSpaModeRoute,
+ DemoStartSsrIndexRoute: DemoStartSsrIndexRoute,
+}
+export const routeTree = rootRouteImport
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+ interface Register {
+ ssr: true
+ router: Awaited>
+ }
+}
diff --git a/apps/tanstack-start-app/src/router.tsx b/apps/tanstack-start-app/src/router.tsx
new file mode 100644
index 0000000..5c70836
--- /dev/null
+++ b/apps/tanstack-start-app/src/router.tsx
@@ -0,0 +1,17 @@
+import { createRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+export const getRouter = () => {
+ const router = createRouter({
+ routeTree,
+ context: {},
+
+ scrollRestoration: true,
+ defaultPreloadStaleTime: 0,
+ })
+
+ return router
+}
diff --git a/apps/tanstack-start-app/src/routes/__root.tsx b/apps/tanstack-start-app/src/routes/__root.tsx
new file mode 100644
index 0000000..ebf7a69
--- /dev/null
+++ b/apps/tanstack-start-app/src/routes/__root.tsx
@@ -0,0 +1,66 @@
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { ProgressProvider } from '@bprogress/tanstack-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import Header from '../components/Header'
+
+import appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+ head: () => ({
+ meta: [
+ {
+ charSet: 'utf-8',
+ },
+ {
+ name: 'viewport',
+ content: 'width=device-width, initial-scale=1',
+ },
+ {
+ title: 'TanStack Start Starter',
+ },
+ ],
+ links: [
+ {
+ rel: 'stylesheet',
+ href: appCss,
+ },
+ ],
+ }),
+
+ shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+ {children}
+
+ ,
+ },
+ ]}
+ />
+
+
+
+ )
+}
diff --git a/apps/tanstack-start-app/src/routes/demo/api.names.ts b/apps/tanstack-start-app/src/routes/demo/api.names.ts
new file mode 100644
index 0000000..a1e4a35
--- /dev/null
+++ b/apps/tanstack-start-app/src/routes/demo/api.names.ts
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { json } from '@tanstack/react-start'
+
+export const Route = createFileRoute('/demo/api/names')({
+ server: {
+ handlers: {
+ GET: () => json(['Alice', 'Bob', 'Charlie']),
+ },
+ },
+})
diff --git a/apps/tanstack-start-app/src/routes/demo/bprogress.tsx b/apps/tanstack-start-app/src/routes/demo/bprogress.tsx
new file mode 100644
index 0000000..168d578
--- /dev/null
+++ b/apps/tanstack-start-app/src/routes/demo/bprogress.tsx
@@ -0,0 +1,94 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useProgress } from '@bprogress/tanstack-router'
+import './start.css'
+
+export const Route = createFileRoute('/demo/bprogress')({
+ component: BProgressDemo,
+})
+
+function BProgressDemo() {
+ const { start, stop, pause, resume, getOptions, setOptions } = useProgress()
+
+ return (
+
+
+
BProgress Demo
+
+ This demonstrates @bprogress/tanstack-router with
+ TanStack Start (SSR).
+
+
+
+
+ Navigation Links (Automatic Progress)
+
+
+
+ ← Home
+
+
+ Reload This Page
+
+
+ SSR Demos →
+
+
+ Server Functions →
+
+
+ API Request →
+
+
+
+
+
+
+ Progress Controls
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Key Features
+
+
+
+ ✅ Server-Side Rendering (SSR)
+
+
+ ✅ Client-side navigation with progress bar
+
+
+ ✅ Automatic progress on all navigation
+
+
+ ✅ Manual progress control via useProgress hook
+
+
+ ✅ Works with TanStack Start and standalone TanStack Router
+