diff --git a/docs/router/config.json b/docs/router/config.json
index 94eff6070d..9f6e202f84 100644
--- a/docs/router/config.json
+++ b/docs/router/config.json
@@ -629,6 +629,10 @@
             {
               "label": "Kitchen Sink + Solid Query (code-based)",
               "to": "framework/solid/examples/kitchen-sink-solid-query"
+            },
+            {
+              "label": "View Transitions",
+              "to": "framework/solid/examples/view-transitions"
             }
           ]
         }
diff --git a/examples/solid/view-transitions/.gitignore b/examples/solid/view-transitions/.gitignore
new file mode 100644
index 0000000000..a6ea47e508
--- /dev/null
+++ b/examples/solid/view-transitions/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/examples/solid/view-transitions/.vscode/settings.json b/examples/solid/view-transitions/.vscode/settings.json
new file mode 100644
index 0000000000..00b5278e58
--- /dev/null
+++ b/examples/solid/view-transitions/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
diff --git a/examples/solid/view-transitions/README.md b/examples/solid/view-transitions/README.md
new file mode 100644
index 0000000000..115199d292
--- /dev/null
+++ b/examples/solid/view-transitions/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`
diff --git a/examples/solid/view-transitions/index.html b/examples/solid/view-transitions/index.html
new file mode 100644
index 0000000000..9b6335c0ac
--- /dev/null
+++ b/examples/solid/view-transitions/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/solid/view-transitions/package.json b/examples/solid/view-transitions/package.json
new file mode 100644
index 0000000000..3ef56ced13
--- /dev/null
+++ b/examples/solid/view-transitions/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "tanstack-router-solid-example-view-transitions",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "vite build && tsc --noEmit",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
+    "@tanstack/solid-router": "^1.135.0",
+    "@tanstack/solid-router-devtools": "^1.135.0",
+    "@tanstack/router-plugin": "^1.135.0",
+    "postcss": "^8.5.1",
+    "solid-js": "^1.9.10",
+    "redaxios": "^0.5.1",
+    "tailwindcss": "^4.1.15",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.11.10",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7"
+  }
+}
diff --git a/examples/solid/view-transitions/postcss.config.mjs b/examples/solid/view-transitions/postcss.config.mjs
new file mode 100644
index 0000000000..a7f73a2d1d
--- /dev/null
+++ b/examples/solid/view-transitions/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
diff --git a/examples/solid/view-transitions/src/main.tsx b/examples/solid/view-transitions/src/main.tsx
new file mode 100644
index 0000000000..740315c011
--- /dev/null
+++ b/examples/solid/view-transitions/src/main.tsx
@@ -0,0 +1,53 @@
+import { render } from 'solid-js/web'
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
+import { routeTree } from './routeTree.gen'
+import './styles.css'
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  defaultStaleTime: 5000,
+  scrollRestoration: true,
+  /* 
+  Using defaultViewTransition would prevent the need to
+  manually add `viewTransition: true` to every navigation.
+
+  If defaultViewTransition.types is a function, it will be called with the
+  location change info and should return an array of view transition types.
+  This is useful if you want to have different view transitions depending on
+  the navigation's specifics.
+
+  An example use case is sliding in a direction based on the index of the
+  previous and next routes when navigating via browser history back and forth.
+  */
+  // defaultViewTransition: true
+  // OR
+  // defaultViewTransition: {
+  //   types: ({ fromLocation, toLocation }) => {
+  //     let direction = 'none'
+
+  //     if (fromLocation) {
+  //       const fromIndex = fromLocation.state.__TSR_index
+  //       const toIndex = toLocation.state.__TSR_index
+
+  //       direction = fromIndex > toIndex ? 'right' : 'left'
+  //     }
+
+  //     return [`slide-${direction}`]
+  //   },
+  // },
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+  render(() => <RouterProvider router={router} />, rootElement)
+}
diff --git a/examples/solid/view-transitions/src/posts.tsx b/examples/solid/view-transitions/src/posts.tsx
new file mode 100644
index 0000000000..e306f15d18
--- /dev/null
+++ b/examples/solid/view-transitions/src/posts.tsx
@@ -0,0 +1,32 @@
+import { notFound } from '@tanstack/solid-router'
+import axios from 'redaxios'
+
+export type PostType = {
+  id: string
+  title: string
+  body: string
+}
+
+export const fetchPost = async (postId: string) => {
+  console.info(`Fetching post with id ${postId}...`)
+  await new Promise((r) => setTimeout(r, 0))
+  const post = await axios
+    .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+    .then((r) => r.data)
+    .catch((err) => {
+      if (err.status === 404) {
+        throw notFound()
+      }
+      throw err
+    })
+
+  return post
+}
+
+export const fetchPosts = async () => {
+  console.info('Fetching posts...')
+  await new Promise((r) => setTimeout(r, 0))
+  return axios
+    .get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts')
+    .then((r) => r.data.slice(0, 10))
+}
diff --git a/examples/solid/view-transitions/src/routeTree.gen.ts b/examples/solid/view-transitions/src/routeTree.gen.ts
new file mode 100644
index 0000000000..114e34ed9d
--- /dev/null
+++ b/examples/solid/view-transitions/src/routeTree.gen.ts
@@ -0,0 +1,171 @@
+/* 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 HowItWorksRouteImport } from './routes/how-it-works'
+import { Route as ExploreRouteImport } from './routes/explore'
+import { Route as PostsRouteRouteImport } from './routes/posts.route'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as PostsIndexRouteImport } from './routes/posts.index'
+import { Route as PostsPostIdRouteImport } from './routes/posts.$postId'
+
+const HowItWorksRoute = HowItWorksRouteImport.update({
+  id: '/how-it-works',
+  path: '/how-it-works',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ExploreRoute = ExploreRouteImport.update({
+  id: '/explore',
+  path: '/explore',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PostsRouteRoute = PostsRouteRouteImport.update({
+  id: '/posts',
+  path: '/posts',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PostsIndexRoute = PostsIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => PostsRouteRoute,
+} as any)
+const PostsPostIdRoute = PostsPostIdRouteImport.update({
+  id: '/$postId',
+  path: '/$postId',
+  getParentRoute: () => PostsRouteRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/posts': typeof PostsRouteRouteWithChildren
+  '/explore': typeof ExploreRoute
+  '/how-it-works': typeof HowItWorksRoute
+  '/posts/$postId': typeof PostsPostIdRoute
+  '/posts/': typeof PostsIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/explore': typeof ExploreRoute
+  '/how-it-works': typeof HowItWorksRoute
+  '/posts/$postId': typeof PostsPostIdRoute
+  '/posts': typeof PostsIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/posts': typeof PostsRouteRouteWithChildren
+  '/explore': typeof ExploreRoute
+  '/how-it-works': typeof HowItWorksRoute
+  '/posts/$postId': typeof PostsPostIdRoute
+  '/posts/': typeof PostsIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/posts'
+    | '/explore'
+    | '/how-it-works'
+    | '/posts/$postId'
+    | '/posts/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/explore' | '/how-it-works' | '/posts/$postId' | '/posts'
+  id:
+    | '__root__'
+    | '/'
+    | '/posts'
+    | '/explore'
+    | '/how-it-works'
+    | '/posts/$postId'
+    | '/posts/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  PostsRouteRoute: typeof PostsRouteRouteWithChildren
+  ExploreRoute: typeof ExploreRoute
+  HowItWorksRoute: typeof HowItWorksRoute
+}
+
+declare module '@tanstack/solid-router' {
+  interface FileRoutesByPath {
+    '/how-it-works': {
+      id: '/how-it-works'
+      path: '/how-it-works'
+      fullPath: '/how-it-works'
+      preLoaderRoute: typeof HowItWorksRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/explore': {
+      id: '/explore'
+      path: '/explore'
+      fullPath: '/explore'
+      preLoaderRoute: typeof ExploreRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/posts': {
+      id: '/posts'
+      path: '/posts'
+      fullPath: '/posts'
+      preLoaderRoute: typeof PostsRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/posts/': {
+      id: '/posts/'
+      path: '/'
+      fullPath: '/posts/'
+      preLoaderRoute: typeof PostsIndexRouteImport
+      parentRoute: typeof PostsRouteRoute
+    }
+    '/posts/$postId': {
+      id: '/posts/$postId'
+      path: '/$postId'
+      fullPath: '/posts/$postId'
+      preLoaderRoute: typeof PostsPostIdRouteImport
+      parentRoute: typeof PostsRouteRoute
+    }
+  }
+}
+
+interface PostsRouteRouteChildren {
+  PostsPostIdRoute: typeof PostsPostIdRoute
+  PostsIndexRoute: typeof PostsIndexRoute
+}
+
+const PostsRouteRouteChildren: PostsRouteRouteChildren = {
+  PostsPostIdRoute: PostsPostIdRoute,
+  PostsIndexRoute: PostsIndexRoute,
+}
+
+const PostsRouteRouteWithChildren = PostsRouteRoute._addFileChildren(
+  PostsRouteRouteChildren,
+)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  PostsRouteRoute: PostsRouteRouteWithChildren,
+  ExploreRoute: ExploreRoute,
+  HowItWorksRoute: HowItWorksRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
diff --git a/examples/solid/view-transitions/src/routes/__root.tsx b/examples/solid/view-transitions/src/routes/__root.tsx
new file mode 100644
index 0000000000..2409a92311
--- /dev/null
+++ b/examples/solid/view-transitions/src/routes/__root.tsx
@@ -0,0 +1,52 @@
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  createRootRoute,
+} from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+  notFoundComponent: () => {
+    return (
+      <div>
+        <p>This is the notFoundComponent configured on root route</p>
+        <Link to="/">Start Over</Link>
+      </div>
+    )
+  },
+})
+
+function RootComponent() {
+  return (
+    <>
+      <HeadContent />
+      <div class="p-2 flex gap-2 text-lg border-b">
+        <Link
+          to="/"
+          activeProps={{
+            class: 'font-bold',
+          }}
+          activeOptions={{ exact: true }}
+          viewTransition
+        >
+          Home
+        </Link>{' '}
+        <Link
+          to="/posts"
+          activeProps={{
+            class: 'font-bold',
+          }}
+          viewTransition
+        >
+          Posts
+        </Link>{' '}
+      </div>
+      <hr />
+      <Outlet />
+      {/* Start rendering router matches */}
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  )
+}
diff --git a/examples/solid/view-transitions/src/routes/explore.tsx b/examples/solid/view-transitions/src/routes/explore.tsx
new file mode 100644
index 0000000000..d0a4565619
--- /dev/null
+++ b/examples/solid/view-transitions/src/routes/explore.tsx
@@ -0,0 +1,30 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/explore')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div class="p-2 [view-transition-name:main-content]">
+      <h3>
+        Explore the CSS to see how to use active-view-transition-type to create
+        new viewTransitions to use with Tanstack Router.
+      </h3>
+      <h4 class={'text-sm mt-2 italic'}>
+        Disclaimer: View Transition Types may not be supported in all browsers
+        and will fall back to the default browser transition if not available.
+      </h4>
+      <div class="flex justify-center gap-10 mt-4">
+        <Link
+          to={'/how-it-works'}
+          // see styles.css for 'slide-right' transition
+          viewTransition={{ types: ['slide-right'] }}
+          class="font-bold"
+        >
+          &lt;- Previous Page
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/solid/view-transitions/src/routes/how-it-works.tsx b/examples/solid/view-transitions/src/routes/how-it-works.tsx
new file mode 100644
index 0000000000..ac217070ad
--- /dev/null
+++ b/examples/solid/view-transitions/src/routes/how-it-works.tsx
@@ -0,0 +1,31 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/how-it-works')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div class="p-2 [view-transition-name:main-content]">
+      <h3>This example demonstrates a variety of custom page transitions.</h3>
+      <div class="flex justify-center gap-10 mt-4">
+        <Link
+          to={'/'}
+          // see styles.css for 'slide-right' transition
+          viewTransition={{ types: ['slide-right'] }}
+          class="font-bold"
+        >
+          &lt;- Previous Page
+        </Link>
+        <Link
+          to={'/explore'}
+          // see styles.css for 'slide-left' transition
+          viewTransition={{ types: ['slide-left'] }}
+          class="font-bold"
+        >
+          Next Page -&gt;
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/solid/view-transitions/src/routes/index.tsx b/examples/solid/view-transitions/src/routes/index.tsx
new file mode 100644
index 0000000000..76a70bc5dd
--- /dev/null
+++ b/examples/solid/view-transitions/src/routes/index.tsx
@@ -0,0 +1,23 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+  component: Home,
+})
+
+function Home() {
+  return (
+    <div class="p-2 [view-transition-name:main-content]">
+      <h3>Welcome To The View Transitions Example!</h3>
+      <div class="flex justify-center mt-4">
+        <Link
+          to={'/how-it-works'}
+          // see styles.css for 'slide-left' transition
+          viewTransition={{ types: ['slide-left'] }}
+          class="font-bold"
+        >
+          Next Page -&gt;
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/solid/view-transitions/src/routes/posts.$postId.tsx b/examples/solid/view-transitions/src/routes/posts.$postId.tsx
new file mode 100644
index 0000000000..55f8871d03
--- /dev/null
+++ b/examples/solid/view-transitions/src/routes/posts.$postId.tsx
@@ -0,0 +1,27 @@
+import { ErrorComponent, createFileRoute } from '@tanstack/solid-router'
+import { fetchPost } from '../posts'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+
+export function PostErrorComponent({ error }: ErrorComponentProps) {
+  return <ErrorComponent error={error} />
+}
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params: { postId } }) => fetchPost(postId),
+  errorComponent: PostErrorComponent,
+  notFoundComponent: () => {
+    return <p>Post not found</p>
+  },
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const post = Route.useLoaderData()
+
+  return (
+    <div class="space-y-2">
+      <h4 class="text-xl font-bold underline">{post().title}</h4>
+      <div class="text-sm">{post().body}</div>
+    </div>
+  )
+}
diff --git a/examples/solid/view-transitions/src/routes/posts.index.tsx b/examples/solid/view-transitions/src/routes/posts.index.tsx
new file mode 100644
index 0000000000..33d0386c19
--- /dev/null
+++ b/examples/solid/view-transitions/src/routes/posts.index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/')({
+  component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+  return <div>Select a post.</div>
+}
diff --git a/examples/solid/view-transitions/src/routes/posts.route.tsx b/examples/solid/view-transitions/src/routes/posts.route.tsx
new file mode 100644
index 0000000000..a54b99f36a
--- /dev/null
+++ b/examples/solid/view-transitions/src/routes/posts.route.tsx
@@ -0,0 +1,42 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from '../posts'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+  component: PostsLayoutComponent,
+})
+
+function PostsLayoutComponent() {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div class="p-2 flex gap-2  [view-transition-name:main-content]">
+      <ul class="list-disc pl-4">
+        {[...posts(), { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
+          (post) => {
+            return (
+              <li class="whitespace-nowrap">
+                <Link
+                  to="/posts/$postId"
+                  params={{
+                    postId: post.id,
+                  }}
+                  class="block py-1 text-blue-600 hover:opacity-75"
+                  activeProps={{ class: 'font-bold underline' }}
+                  // see styles.css for 'warp' transition
+                  viewTransition={{ types: ['warp'] }}
+                >
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>
+            )
+          },
+        )}
+      </ul>
+      <hr />
+      <div class="[view-transition-name:post]">
+        <Outlet />
+      </div>
+    </div>
+  )
+}
diff --git a/examples/solid/view-transitions/src/styles.css b/examples/solid/view-transitions/src/styles.css
new file mode 100644
index 0000000000..818667133d
--- /dev/null
+++ b/examples/solid/view-transitions/src/styles.css
@@ -0,0 +1,114 @@
+@import 'tailwindcss';
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+html {
+  color-scheme: light dark;
+}
+* {
+  @apply border-gray-200 dark:border-gray-800;
+}
+body {
+  @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+}
+
+/* Slide Left Transition */
+html:active-view-transition-type(slide-left) {
+  &::view-transition-old(main-content) {
+    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-left;
+  }
+  &::view-transition-new(main-content) {
+    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-left;
+  }
+}
+
+@keyframes slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Slide Right Transition */
+html:active-view-transition-type(slide-right) {
+  &::view-transition-old(main-content) {
+    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-right;
+  }
+  &::view-transition-new(main-content) {
+    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-right;
+  }
+}
+
+@keyframes slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Warp/Rotate Transition */
+html:active-view-transition-type(warp) {
+  &::view-transition-old(post) {
+    animation: 400ms ease-out both warp-out;
+  }
+
+  &::view-transition-new(post) {
+    animation: 400ms ease-out both warp-in;
+  }
+}
+
+@keyframes warp-out {
+  from {
+    opacity: 1;
+    filter: blur(0) brightness(1);
+    transform: scale(1) rotate(0deg);
+  }
+  to {
+    opacity: 0;
+    filter: blur(15px) brightness(1.8);
+    transform: scale(1.1) rotate(90deg);
+  }
+}
+
+@keyframes warp-in {
+  from {
+    opacity: 0;
+    filter: blur(15px) brightness(1.8);
+    transform: scale(0.9) rotate(-45deg);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0) brightness(1);
+    transform: scale(1) rotate(0deg);
+  }
+}
diff --git a/examples/solid/view-transitions/tsconfig.json b/examples/solid/view-transitions/tsconfig.json
new file mode 100644
index 0000000000..6e3ba6f110
--- /dev/null
+++ b/examples/solid/view-transitions/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "skipLibCheck": true
+  }
+}
diff --git a/examples/solid/view-transitions/vite.config.js b/examples/solid/view-transitions/vite.config.js
new file mode 100644
index 0000000000..74e9ca3db3
--- /dev/null
+++ b/examples/solid/view-transitions/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      target: 'solid',
+      autoCodeSplitting: true,
+    }),
+    solid(),
+  ],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f9f0052714..868c3a3cd0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7691,6 +7691,46 @@ importers:
         specifier: ^5.1.4
         version: 5.1.4(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
 
+  examples/solid/view-transitions:
+    dependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.1.15
+        version: 4.1.15
+      '@tanstack/router-plugin':
+        specifier: workspace:*
+        version: link:../../../packages/router-plugin
+      '@tanstack/solid-router':
+        specifier: ^1.135.0
+        version: link:../../../packages/solid-router
+      '@tanstack/solid-router-devtools':
+        specifier: workspace:^
+        version: link:../../../packages/solid-router-devtools
+      postcss:
+        specifier: ^8.5.1
+        version: 8.5.6
+      redaxios:
+        specifier: ^0.5.1
+        version: 0.5.1
+      solid-js:
+        specifier: 1.9.10
+        version: 1.9.10
+      tailwindcss:
+        specifier: ^4.1.15
+        version: 4.1.17
+      zod:
+        specifier: ^3.24.2
+        version: 3.25.57
+    devDependencies:
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.2
+      vite:
+        specifier: ^7.1.7
+        version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.10(@testing-library/jest-dom@6.6.3)(solid-js@1.9.10)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
+
   packages/arktype-adapter:
     devDependencies:
       '@tanstack/react-router':
