diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json
index 1e14436d2..359dcb367 100644
--- a/examples/portfolio/package.json
+++ b/examples/portfolio/package.json
@@ -63,7 +63,8 @@
         "tsx": "^4.21.0",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.59.2",
-        "vite": "^7.3.2"
+        "vite": "^7.3.2",
+        "vite-tsconfig-paths": "^6.1.1"
     },
     "files": [
         "dist/**"
diff --git a/examples/portfolio/src/routeTree.gen.ts b/examples/portfolio/src/routeTree.gen.ts
index 0d9d372c8..821a209e8 100644
--- a/examples/portfolio/src/routeTree.gen.ts
+++ b/examples/portfolio/src/routeTree.gen.ts
@@ -9,122 +9,195 @@
 // 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 SettingsRouteImport } from './routes/settings'
-import { Route as OldRouteImport } from './routes/old'
-import { Route as ConnectRouteImport } from './routes/connect'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as WalletWalletIdRouteImport } from './routes/wallet.$walletId'
+import { Route as NextRouteRouteImport } from './routes/next/route'
+import { Route as LegacyRouteRouteImport } from './routes/_legacy/route'
+import { Route as LegacyIndexRouteImport } from './routes/_legacy/index'
+import { Route as NextConnectRouteImport } from './routes/next/connect'
+import { Route as LegacySettingsRouteImport } from './routes/_legacy/settings'
+import { Route as LegacyOldRouteImport } from './routes/_legacy/old'
+import { Route as LegacyWalletWalletIdRouteImport } from './routes/_legacy/wallet.$walletId'
 
-const SettingsRoute = SettingsRouteImport.update({
-  id: '/settings',
-  path: '/settings',
+const NextRouteRoute = NextRouteRouteImport.update({
+  id: '/next',
+  path: '/next',
   getParentRoute: () => rootRouteImport,
 } as any)
-const OldRoute = OldRouteImport.update({
-  id: '/old',
-  path: '/old',
+const LegacyRouteRoute = LegacyRouteRouteImport.update({
+  id: '/_legacy',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ConnectRoute = ConnectRouteImport.update({
+const LegacyIndexRoute = LegacyIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => LegacyRouteRoute,
+} as any)
+const NextConnectRoute = NextConnectRouteImport.update({
   id: '/connect',
   path: '/connect',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => NextRouteRoute,
 } as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
+const LegacySettingsRoute = LegacySettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => LegacyRouteRoute,
+} as any)
+const LegacyOldRoute = LegacyOldRouteImport.update({
+  id: '/old',
+  path: '/old',
+  getParentRoute: () => LegacyRouteRoute,
 } as any)
-const WalletWalletIdRoute = WalletWalletIdRouteImport.update({
+const LegacyWalletWalletIdRoute = LegacyWalletWalletIdRouteImport.update({
   id: '/wallet/$walletId',
   path: '/wallet/$walletId',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => LegacyRouteRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/connect': typeof ConnectRoute
-  '/old': typeof OldRoute
-  '/settings': typeof SettingsRoute
-  '/wallet/$walletId': typeof WalletWalletIdRoute
+  '/': typeof LegacyIndexRoute
+  '/next': typeof NextRouteRouteWithChildren
+  '/old': typeof LegacyOldRoute
+  '/settings': typeof LegacySettingsRoute
+  '/next/connect': typeof NextConnectRoute
+  '/wallet/$walletId': typeof LegacyWalletWalletIdRoute
 }
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/connect': typeof ConnectRoute
-  '/old': typeof OldRoute
-  '/settings': typeof SettingsRoute
-  '/wallet/$walletId': typeof WalletWalletIdRoute
+  '/next': typeof NextRouteRouteWithChildren
+  '/old': typeof LegacyOldRoute
+  '/settings': typeof LegacySettingsRoute
+  '/next/connect': typeof NextConnectRoute
+  '/': typeof LegacyIndexRoute
+  '/wallet/$walletId': typeof LegacyWalletWalletIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-  '/connect': typeof ConnectRoute
-  '/old': typeof OldRoute
-  '/settings': typeof SettingsRoute
-  '/wallet/$walletId': typeof WalletWalletIdRoute
+  '/_legacy': typeof LegacyRouteRouteWithChildren
+  '/next': typeof NextRouteRouteWithChildren
+  '/_legacy/old': typeof LegacyOldRoute
+  '/_legacy/settings': typeof LegacySettingsRoute
+  '/next/connect': typeof NextConnectRoute
+  '/_legacy/': typeof LegacyIndexRoute
+  '/_legacy/wallet/$walletId': typeof LegacyWalletWalletIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/connect' | '/old' | '/settings' | '/wallet/$walletId'
+  fullPaths:
+    | '/'
+    | '/next'
+    | '/old'
+    | '/settings'
+    | '/next/connect'
+    | '/wallet/$walletId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/connect' | '/old' | '/settings' | '/wallet/$walletId'
-  id: '__root__' | '/' | '/connect' | '/old' | '/settings' | '/wallet/$walletId'
+  to:
+    | '/next'
+    | '/old'
+    | '/settings'
+    | '/next/connect'
+    | '/'
+    | '/wallet/$walletId'
+  id:
+    | '__root__'
+    | '/_legacy'
+    | '/next'
+    | '/_legacy/old'
+    | '/_legacy/settings'
+    | '/next/connect'
+    | '/_legacy/'
+    | '/_legacy/wallet/$walletId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  ConnectRoute: typeof ConnectRoute
-  OldRoute: typeof OldRoute
-  SettingsRoute: typeof SettingsRoute
-  WalletWalletIdRoute: typeof WalletWalletIdRoute
+  LegacyRouteRoute: typeof LegacyRouteRouteWithChildren
+  NextRouteRoute: typeof NextRouteRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/settings': {
-      id: '/settings'
-      path: '/settings'
-      fullPath: '/settings'
-      preLoaderRoute: typeof SettingsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/old': {
-      id: '/old'
-      path: '/old'
-      fullPath: '/old'
-      preLoaderRoute: typeof OldRouteImport
+    '/next': {
+      id: '/next'
+      path: '/next'
+      fullPath: '/next'
+      preLoaderRoute: typeof NextRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/connect': {
-      id: '/connect'
-      path: '/connect'
-      fullPath: '/connect'
-      preLoaderRoute: typeof ConnectRouteImport
+    '/_legacy': {
+      id: '/_legacy'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof LegacyRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/': {
-      id: '/'
+    '/_legacy/': {
+      id: '/_legacy/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
+      preLoaderRoute: typeof LegacyIndexRouteImport
+      parentRoute: typeof LegacyRouteRoute
+    }
+    '/next/connect': {
+      id: '/next/connect'
+      path: '/connect'
+      fullPath: '/next/connect'
+      preLoaderRoute: typeof NextConnectRouteImport
+      parentRoute: typeof NextRouteRoute
+    }
+    '/_legacy/settings': {
+      id: '/_legacy/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof LegacySettingsRouteImport
+      parentRoute: typeof LegacyRouteRoute
+    }
+    '/_legacy/old': {
+      id: '/_legacy/old'
+      path: '/old'
+      fullPath: '/old'
+      preLoaderRoute: typeof LegacyOldRouteImport
+      parentRoute: typeof LegacyRouteRoute
     }
-    '/wallet/$walletId': {
-      id: '/wallet/$walletId'
+    '/_legacy/wallet/$walletId': {
+      id: '/_legacy/wallet/$walletId'
       path: '/wallet/$walletId'
       fullPath: '/wallet/$walletId'
-      preLoaderRoute: typeof WalletWalletIdRouteImport
-      parentRoute: typeof rootRouteImport
+      preLoaderRoute: typeof LegacyWalletWalletIdRouteImport
+      parentRoute: typeof LegacyRouteRoute
     }
   }
 }
 
+interface LegacyRouteRouteChildren {
+  LegacyOldRoute: typeof LegacyOldRoute
+  LegacySettingsRoute: typeof LegacySettingsRoute
+  LegacyIndexRoute: typeof LegacyIndexRoute
+  LegacyWalletWalletIdRoute: typeof LegacyWalletWalletIdRoute
+}
+
+const LegacyRouteRouteChildren: LegacyRouteRouteChildren = {
+  LegacyOldRoute: LegacyOldRoute,
+  LegacySettingsRoute: LegacySettingsRoute,
+  LegacyIndexRoute: LegacyIndexRoute,
+  LegacyWalletWalletIdRoute: LegacyWalletWalletIdRoute,
+}
+
+const LegacyRouteRouteWithChildren = LegacyRouteRoute._addFileChildren(
+  LegacyRouteRouteChildren,
+)
+
+interface NextRouteRouteChildren {
+  NextConnectRoute: typeof NextConnectRoute
+}
+
+const NextRouteRouteChildren: NextRouteRouteChildren = {
+  NextConnectRoute: NextConnectRoute,
+}
+
+const NextRouteRouteWithChildren = NextRouteRoute._addFileChildren(
+  NextRouteRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  ConnectRoute: ConnectRoute,
-  OldRoute: OldRoute,
-  SettingsRoute: SettingsRoute,
-  WalletWalletIdRoute: WalletWalletIdRoute,
+  LegacyRouteRoute: LegacyRouteRouteWithChildren,
+  NextRouteRoute: NextRouteRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/examples/portfolio/src/routes/__root.tsx b/examples/portfolio/src/routes/__root.tsx
index 7feba6b66..e82565993 100644
--- a/examples/portfolio/src/routes/__root.tsx
+++ b/examples/portfolio/src/routes/__root.tsx
@@ -1,6 +1,5 @@
-import { createRootRouteWithContext } from '@tanstack/react-router'
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
 import type { QueryClient } from '@tanstack/react-query'
-import { RootComponent } from './__root.component'
 
 export interface RouterContext {
     queryClient: QueryClient
@@ -9,3 +8,7 @@ export interface RouterContext {
 export const Route = createRootRouteWithContext<RouterContext>()({
     shellComponent: RootComponent,
 })
+
+export function RootComponent() {
+    return <Outlet />
+}
diff --git a/examples/portfolio/src/routes/index.component.tsx b/examples/portfolio/src/routes/_legacy/index.component.tsx
similarity index 95%
rename from examples/portfolio/src/routes/index.component.tsx
rename to examples/portfolio/src/routes/_legacy/index.component.tsx
index 40cca0599..6b752a616 100644
--- a/examples/portfolio/src/routes/index.component.tsx
+++ b/examples/portfolio/src/routes/_legacy/index.component.tsx
@@ -6,20 +6,20 @@ import type {
     AllocationView,
     SettlementInfo,
 } from '@canton-network/core-token-standard'
-import { ActionRequired } from '../components/action-required'
-import { usePrimaryAccount } from '../hooks/useAccounts'
+import { ActionRequired } from '../../components/action-required'
+import { usePrimaryAccount } from '../../hooks/useAccounts'
 import {
     usePendingTransfersQueryOptions,
     useAllocationRequestsQueryOptions,
     useAllocationsQueryOptions,
-} from '../hooks/query-options'
+} from '../../hooks/query-options'
 import { useSuspenseQuery, useQuery } from '@tanstack/react-query'
-import { WalletsPreview } from '../components/wallets-preview'
+import { WalletsPreview } from '../../components/wallets-preview'
 import type {
     ActionItem,
     TransferActionItem,
     AllocationActionItem,
-} from '../components/types'
+} from '../../components/types'
 
 export function Index() {
     const primaryParty = usePrimaryAccount()?.partyId
diff --git a/examples/portfolio/src/routes/index.tsx b/examples/portfolio/src/routes/_legacy/index.tsx
similarity index 70%
rename from examples/portfolio/src/routes/index.tsx
rename to examples/portfolio/src/routes/_legacy/index.tsx
index f8777070c..13d146a5c 100644
--- a/examples/portfolio/src/routes/index.tsx
+++ b/examples/portfolio/src/routes/_legacy/index.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { Index } from './index.component'
 
-export const Route = createFileRoute('/')({
+export const Route = createFileRoute('/_legacy/')({
     component: Index,
 })
diff --git a/examples/portfolio/src/routes/old.component.tsx b/examples/portfolio/src/routes/_legacy/old.component.tsx
similarity index 70%
rename from examples/portfolio/src/routes/old.component.tsx
rename to examples/portfolio/src/routes/_legacy/old.component.tsx
index 5dddebbca..fee9ebe7e 100644
--- a/examples/portfolio/src/routes/old.component.tsx
+++ b/examples/portfolio/src/routes/_legacy/old.component.tsx
@@ -1,12 +1,12 @@
-import '../App.css'
-import { HoldingsTab } from '../oldcomponents/HoldingsTab'
-import { RegistriesTab } from '../oldcomponents/RegistriesTab'
-import { PendingTransfersTab } from '../oldcomponents/PendingTransfersTab'
-import { TwoStepTransferTab } from '../oldcomponents/TwoStepTransferTab'
-import { TransactionHistoryTab } from '../oldcomponents/TransactionHistoryTab'
-import { ConnectionCard } from '../oldcomponents/ConnectionCard'
-import { AllocationsTab } from '../oldcomponents/AllocationsTab'
-import { Tabs } from '../oldcomponents/Tabs'
+import '../../App.css'
+import { HoldingsTab } from '../../oldcomponents/HoldingsTab'
+import { RegistriesTab } from '../../oldcomponents/RegistriesTab'
+import { PendingTransfersTab } from '../../oldcomponents/PendingTransfersTab'
+import { TwoStepTransferTab } from '../../oldcomponents/TwoStepTransferTab'
+import { TransactionHistoryTab } from '../../oldcomponents/TransactionHistoryTab'
+import { ConnectionCard } from '../../oldcomponents/ConnectionCard'
+import { AllocationsTab } from '../../oldcomponents/AllocationsTab'
+import { Tabs } from '../../oldcomponents/Tabs'
 
 export function OldApp() {
     return (
diff --git a/examples/portfolio/src/routes/old.tsx b/examples/portfolio/src/routes/_legacy/old.tsx
similarity index 69%
rename from examples/portfolio/src/routes/old.tsx
rename to examples/portfolio/src/routes/_legacy/old.tsx
index 3e50b29ba..451b4ac3c 100644
--- a/examples/portfolio/src/routes/old.tsx
+++ b/examples/portfolio/src/routes/_legacy/old.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { OldApp } from './old.component'
 
-export const Route = createFileRoute('/old')({
+export const Route = createFileRoute('/_legacy/old')({
     component: OldApp,
 })
diff --git a/examples/portfolio/src/routes/__root.component.tsx b/examples/portfolio/src/routes/_legacy/route.tsx
similarity index 71%
rename from examples/portfolio/src/routes/__root.component.tsx
rename to examples/portfolio/src/routes/_legacy/route.tsx
index eef893dce..f0746ec38 100644
--- a/examples/portfolio/src/routes/__root.component.tsx
+++ b/examples/portfolio/src/routes/_legacy/route.tsx
@@ -1,14 +1,18 @@
-import { Outlet } from '@tanstack/react-router'
+import { Outlet, createFileRoute } from '@tanstack/react-router'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
-import { Header } from '../components/header'
-import { NetworkBanner } from '../components/network-banner'
-import { RegistryValidationModal } from '../components/registry-validation-modal'
-import { useRegistryValidation } from '../hooks/useRegistryValidation'
 import { Container } from '@mui/material'
+import { Header } from '../../components/header'
+import { NetworkBanner } from '../../components/network-banner'
+import { RegistryValidationModal } from '../../components/registry-validation-modal'
+import { useRegistryValidation } from '../../hooks/useRegistryValidation'
 
-export function RootComponent() {
+export const Route = createFileRoute('/_legacy')({
+    component: LegacyLayout,
+})
+
+function LegacyLayout() {
     const validationStatus = useRegistryValidation()
 
     return (
diff --git a/examples/portfolio/src/routes/settings.component.tsx b/examples/portfolio/src/routes/_legacy/settings.component.tsx
similarity index 67%
rename from examples/portfolio/src/routes/settings.component.tsx
rename to examples/portfolio/src/routes/_legacy/settings.component.tsx
index d63ebfe40..bf85bbef7 100644
--- a/examples/portfolio/src/routes/settings.component.tsx
+++ b/examples/portfolio/src/routes/_legacy/settings.component.tsx
@@ -1,7 +1,7 @@
 import { Box, Typography } from '@mui/material'
-import { RegistrySettings } from '../components/registry-settings'
-import { TapSettings } from '../components/tap-settings'
-import { useIsDevNet } from '../hooks/useIsDevNet'
+import { RegistrySettings } from '../../components/registry-settings'
+import { TapSettings } from '../../components/tap-settings'
+import { useIsDevNet } from '../../hooks/useIsDevNet'
 
 export function SettingsPage() {
     const { data: isDevNet } = useIsDevNet()
diff --git a/examples/portfolio/src/routes/settings.tsx b/examples/portfolio/src/routes/_legacy/settings.tsx
similarity index 70%
rename from examples/portfolio/src/routes/settings.tsx
rename to examples/portfolio/src/routes/_legacy/settings.tsx
index c0b787d1e..d83a76201 100644
--- a/examples/portfolio/src/routes/settings.tsx
+++ b/examples/portfolio/src/routes/_legacy/settings.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { SettingsPage } from './settings.component'
 
-export const Route = createFileRoute('/settings')({
+export const Route = createFileRoute('/_legacy/settings')({
     component: SettingsPage,
 })
diff --git a/examples/portfolio/src/routes/wallet.$walletId.component.tsx b/examples/portfolio/src/routes/_legacy/wallet.$walletId.component.tsx
similarity index 90%
rename from examples/portfolio/src/routes/wallet.$walletId.component.tsx
rename to examples/portfolio/src/routes/_legacy/wallet.$walletId.component.tsx
index 2cacf0ab7..b8843b4fb 100644
--- a/examples/portfolio/src/routes/wallet.$walletId.component.tsx
+++ b/examples/portfolio/src/routes/_legacy/wallet.$walletId.component.tsx
@@ -4,17 +4,17 @@
 import { Link, getRouteApi } from '@tanstack/react-router'
 import { Box, Typography, Paper, Skeleton, Button } from '@mui/material'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import { useAccounts } from '../hooks/useAccounts'
-import { useWalletHoldings } from '../hooks/useWalletHoldings'
+import { useAccounts } from '../../hooks/useAccounts'
+import { useWalletHoldings } from '../../hooks/useWalletHoldings'
 import {
     useTransactionHistoryForParty,
     useDeduplicatedTransactionHistoryForParty,
-} from '../hooks/useTransactionHistory'
-import { CopyableIdentifier } from '../components/copyable-identifier'
-import { InstrumentAccordion } from '../components/instrument-accordion'
-import { TransactionTable } from '../components/TransactionTable'
+} from '../../hooks/useTransactionHistory'
+import { CopyableIdentifier } from '../../components/copyable-identifier'
+import { InstrumentAccordion } from '../../components/instrument-accordion'
+import { TransactionTable } from '../../components/TransactionTable'
 
-const walletRouteApi = getRouteApi('/wallet/$walletId')
+const walletRouteApi = getRouteApi('/_legacy/wallet/$walletId')
 
 export function WalletDetailPage() {
     const { walletId } = walletRouteApi.useParams()
diff --git a/examples/portfolio/src/routes/wallet.$walletId.tsx b/examples/portfolio/src/routes/_legacy/wallet.$walletId.tsx
similarity index 81%
rename from examples/portfolio/src/routes/wallet.$walletId.tsx
rename to examples/portfolio/src/routes/_legacy/wallet.$walletId.tsx
index 3f759a1e5..5b12c6ba5 100644
--- a/examples/portfolio/src/routes/wallet.$walletId.tsx
+++ b/examples/portfolio/src/routes/_legacy/wallet.$walletId.tsx
@@ -4,6 +4,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { WalletDetailPage } from './wallet.$walletId.component'
 
-export const Route = createFileRoute('/wallet/$walletId')({
+export const Route = createFileRoute('/_legacy/wallet/$walletId')({
     component: WalletDetailPage,
 })
diff --git a/examples/portfolio/src/routes/connect.tsx b/examples/portfolio/src/routes/next/connect.tsx
similarity index 88%
rename from examples/portfolio/src/routes/connect.tsx
rename to examples/portfolio/src/routes/next/connect.tsx
index d53a6a23e..31de221e6 100644
--- a/examples/portfolio/src/routes/connect.tsx
+++ b/examples/portfolio/src/routes/next/connect.tsx
@@ -1,9 +1,9 @@
 import { Box, Typography } from '@mui/material'
 import { createFileRoute, Navigate } from '@tanstack/react-router'
-import { PillButton } from '../components/ui/PillButton'
-import { useConnection } from '../contexts/ConnectionContext'
+import { PillButton } from '@components/ui/PillButton'
+import { useConnection } from '@contexts/ConnectionContext'
 
-export const Route = createFileRoute('/connect')({
+export const Route = createFileRoute('/next/connect')({
     component: RouteComponent,
 })
 
diff --git a/examples/portfolio/src/routes/next/route.tsx b/examples/portfolio/src/routes/next/route.tsx
new file mode 100644
index 000000000..6df85b154
--- /dev/null
+++ b/examples/portfolio/src/routes/next/route.tsx
@@ -0,0 +1,9 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/next')({
+    component: NextLayout,
+})
+
+function NextLayout() {
+    return <Outlet />
+}
diff --git a/examples/portfolio/tsconfig.app.json b/examples/portfolio/tsconfig.app.json
index f264e6df2..83abf1c42 100644
--- a/examples/portfolio/tsconfig.app.json
+++ b/examples/portfolio/tsconfig.app.json
@@ -6,6 +6,15 @@
         "lib": ["ES2020", "DOM", "DOM.Iterable"],
         "module": "ESNext",
         "skipLibCheck": true,
+        "baseUrl": ".",
+        "paths": {
+            "@components/*": ["src/components/*"],
+            "@contexts/*": ["src/contexts/*"],
+            "@hooks/*": ["src/hooks/*"],
+            "@lib/*": ["src/lib/*"],
+            "@utils/*": ["src/utils/*"],
+            "@services/*": ["src/services/*"]
+        },
 
         /* Bundler mode */
         "moduleResolution": "bundler",
diff --git a/examples/portfolio/vite.config.ts b/examples/portfolio/vite.config.ts
index 229918e1a..5713b8222 100644
--- a/examples/portfolio/vite.config.ts
+++ b/examples/portfolio/vite.config.ts
@@ -5,10 +5,12 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { tanstackRouter } from '@tanstack/router-plugin/vite'
 import { devtools } from '@tanstack/devtools-vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
 
 // https://vite.dev/config/
 export default defineConfig({
     plugins: [
+        tsconfigPaths({ projects: ['tsconfig.app.json'] }),
         devtools(),
         tanstackRouter({
             target: 'react',
diff --git a/yarn.lock b/yarn.lock
index 5fbdcf15a..ec3b907ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2325,6 +2325,7 @@ __metadata:
     typescript-eslint: "npm:^8.59.2"
     uuid: "npm:^14.0.0"
     vite: "npm:^7.3.2"
+    vite-tsconfig-paths: "npm:^6.1.1"
     zod: "npm:^4.4.3"
   languageName: unknown
   linkType: soft
@@ -14373,6 +14374,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: 10c0/a54c029520cf58bda1d8884f72bd49b4cd74e977883268d931fd83bcbd1a9eb96d57c7dbd4ad80148fb9247467ebfb9b215630b2ed7563b2a8de02e1ff7f89d1
+  languageName: node
+  linkType: hard
+
 "goober@npm:^2.1.16":
   version: 2.1.18
   resolution: "goober@npm:2.1.18"
@@ -21132,6 +21140,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsconfck@npm:^3.0.3":
+  version: 3.1.6
+  resolution: "tsconfck@npm:3.1.6"
+  peerDependencies:
+    typescript: ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: 10c0/269c3c513540be44844117bb9b9258fe6f8aeab026d32aeebf458d5299125f330711429dbb556dbf125a0bc25f4a81e6c24ac96de2740badd295c3fb400f66c4
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths@npm:4.2.0, tsconfig-paths@npm:^4.1.2":
   version: 4.2.0
   resolution: "tsconfig-paths@npm:4.2.0"
@@ -21961,6 +21983,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-tsconfig-paths@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "vite-tsconfig-paths@npm:6.1.1"
+  dependencies:
+    debug: "npm:^4.1.1"
+    globrex: "npm:^0.1.2"
+    tsconfck: "npm:^3.0.3"
+  peerDependencies:
+    vite: "*"
+  checksum: 10c0/5e61080991418fefa08c5b98995cdcada4931ae01ac97ef9e2ee941051f61b76890a6e7ba48bed3b2a229ec06fef33a06621bba4ce457b3f4233ad31dc0c1d1b
+  languageName: node
+  linkType: hard
+
 "vite@npm:^7.2.4":
   version: 7.3.2
   resolution: "vite@npm:7.3.2"