diff --git a/app/projects/ranger.tsx b/app/projects/ranger.tsx
index 8e655c4d..1a73ae82 100644
--- a/app/projects/ranger.tsx
+++ b/app/projects/ranger.tsx
@@ -1,6 +1,75 @@
+import { Link } from '@remix-run/react'
+import reactLogo from '~/images/react-logo.svg'
+import { FaDiscord, FaGithub } from 'react-icons/fa/index'
+import { useDocsConfig } from '~/utils/config'
+import type { ConfigSchema, MenuItem } from '~/utils/config'
+
 export const repo = 'tanstack/ranger'
 
-export const v1branch = 'main'
+export const latestBranch = 'main'
+export const latestVersion = 'v0'
+export const availableVersions = ['v0']
 
 export const gradientText =
   'inline-block text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500'
+
+const frameworks = {
+  react: { label: 'React', logo: reactLogo, value: 'react' },
+} as const
+
+export type Framework = keyof typeof frameworks
+
+export const createLogo = (version?: string) => (
+  <>
+    <Link to="/" className="font-light">
+      TanStack
+    </Link>
+    <Link to=".." className="font-bold">
+      <span className={`${gradientText}`}>Ranger</span>{' '}
+      <span className="text-sm align-super">
+        {version === 'latest' ? latestVersion : version}
+      </span>
+    </Link>
+  </>
+)
+
+const localMenu: MenuItem = {
+  label: 'Menu',
+  children: [
+    {
+      label: 'Home',
+      to: '..',
+    },
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          GitHub <FaGithub className="text-lg opacity-20" />
+        </div>
+      ),
+      to: 'https://github.com/tanstack/ranger',
+    },
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          Discord <FaDiscord className="text-lg opacity-20" />
+        </div>
+      ),
+      to: 'https://tlinz.com/discord',
+    },
+  ],
+}
+
+export function getBranch(argVersion?: string) {
+  const version = argVersion || latestVersion
+
+  return ['latest', latestVersion].includes(version) ? latestBranch : version
+}
+
+export const useRangerDocsConfig = (config: ConfigSchema) => {
+  return useDocsConfig({
+    config,
+    frameworks,
+    localMenu,
+    availableVersions,
+  })
+}
diff --git a/app/routes/ranger.$.tsx b/app/routes/ranger.$.tsx
index 35cec549..34ad5bec 100644
--- a/app/routes/ranger.$.tsx
+++ b/app/routes/ranger.$.tsx
@@ -1,32 +1,5 @@
-import type { LoaderFunction } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 
-export const loader: LoaderFunction = (context) => {
-  handleRedirects(context)
-
-  return redirect('/ranger/v1')
-}
-
-function handleRedirects(context: Parameters<LoaderFunction>[0]) {
-  const url = new URL(context.request.url)
-  // prettier-ignore
-  const reactRangerV1List = [
-    {from: 'docs/overview',to: 'docs/guide/introduction',},
-    {from: 'docs/installation',to: 'docs/guide/installation',},
-    {from: 'examples/basic',to: 'docs/examples/react/basic',},
-    {from: 'examples/custom-steps',to: 'docs/examples/react/custom-steps',},
-    {from: 'examples/custom-styles',to: 'docs/examples/react/custom-styles',},
-    {from: 'examples/logarithmic-interpolator',to: 'docs/examples/react/logarithmic-interpolator',},
-    {from: 'examples/update-on-drag',to: 'docs/examples/react/update-on-drag',},
-    {from: '',to: '',},
-  ]
-
-  reactRangerV1List.forEach((item) => {
-    if (url.pathname.startsWith(`/ranger/v1/${item.from}`)) {
-      throw redirect(
-        `/ranger/v1/${item.to}?from=reactRangerV1&original=https://react-ranger-v1.tanstack.com/${item.from}`,
-        301
-      )
-    }
-  })
+export const loader = () => {
+  return redirect('/ranger/latest')
 }
diff --git a/app/routes/ranger.v1._index.tsx b/app/routes/ranger.$version._index.tsx
similarity index 96%
rename from app/routes/ranger.v1._index.tsx
rename to app/routes/ranger.$version._index.tsx
index 6dee03d4..c1872dcd 100644
--- a/app/routes/ranger.v1._index.tsx
+++ b/app/routes/ranger.$version._index.tsx
@@ -7,17 +7,17 @@ import {
   FaGithub,
   FaTshirt,
 } from 'react-icons/fa'
-import { Link, useLoaderData } from '@remix-run/react'
+import { Link, useLoaderData, useParams } from '@remix-run/react'
 import { json } from '@remix-run/node'
 import { TbHeartHandshake, TbZoomQuestion } from 'react-icons/tb'
 import { VscPreview } from 'react-icons/vsc'
 import { RiLightbulbFlashLine } from 'react-icons/ri'
-import { gradientText, v1branch } from '~/projects/ranger'
+import { gradientText, getBranch } from '~/projects/ranger'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import SponsorPack from '~/components/SponsorPack'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
-import type { LoaderFunction } from '@remix-run/node'
+import type { Framework } from '~/projects/ranger'
 
 const menu = [
   {
@@ -70,7 +70,7 @@ const menu = [
   },
 ]
 
-export const loader: LoaderFunction = async () => {
+export const loader = async () => {
   const sponsors = await getSponsorsForSponsorPack()
 
   return json({
@@ -80,10 +80,9 @@ export const loader: LoaderFunction = async () => {
 
 export default function TanStackRouterRoute() {
   const { sponsors } = useLoaderData<typeof loader>()
-  const [framework] = React.useState<
-    'react' | 'preact' | 'svelte' | 'vue' | 'solid'
-  >('react')
-
+  const { version } = useParams()
+  const branch = getBranch(version)
+  const [framework] = React.useState<Framework>('react')
   const [isDark, setIsDark] = React.useState(true)
 
   React.useEffect(() => {
@@ -317,7 +316,7 @@ export default function TanStackRouterRoute() {
       <div className="bg-white dark:bg-black">
         <iframe
           key={framework}
-          src={`https://codesandbox.io/embed/github/tanstack/ranger/tree/${v1branch}/examples/${framework}/basic?autoresize=1&fontsize=16&theme=${
+          src={`https://codesandbox.io/embed/github/tanstack/ranger/tree/${branch}/examples/${framework}/basic?autoresize=1&fontsize=16&theme=${
             isDark ? 'dark' : 'light'
           }`}
           title="tannerlinsley/react-ranger: basic"
diff --git a/app/routes/ranger.$version.docs.$.tsx b/app/routes/ranger.$version.docs.$.tsx
new file mode 100644
index 00000000..9a2d1933
--- /dev/null
+++ b/app/routes/ranger.$version.docs.$.tsx
@@ -0,0 +1,44 @@
+import { useLoaderData, useParams } from '@remix-run/react'
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
+import { repo, getBranch } from '~/projects/ranger'
+import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { seo } from '~/utils/seo'
+import { Doc } from '~/components/Doc'
+import { loadDocs } from '~/utils/docs'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { '*': docsPath, version } = context.params
+  const { url } = context.request
+
+  return loadDocs({
+    repo,
+    branch: getBranch(version),
+    docPath: `docs/${docsPath}`,
+    currentPath: url,
+    redirectPath: url.replace(/\/docs.*/, '/docs/overview'),
+  })
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return seo({
+    title: `${data?.title ?? 'Docs'} | TanStack Ranger Docs`,
+    description: data?.description,
+  })
+}
+
+export const ErrorBoundary = DefaultErrorBoundary
+
+export default function RouteReactRangerDocs() {
+  const { title, content, filePath } = useLoaderData<typeof loader>()
+  const { version } = useParams()
+  const branch = getBranch(version)
+  return (
+    <Doc
+      title={title}
+      content={content}
+      repo={repo}
+      branch={branch}
+      filePath={filePath}
+    />
+  )
+}
diff --git a/app/routes/ranger.v1.docs._index.tsx b/app/routes/ranger.$version.docs._index.tsx
similarity index 100%
rename from app/routes/ranger.v1.docs._index.tsx
rename to app/routes/ranger.$version.docs._index.tsx
diff --git a/app/routes/ranger.$version.docs.framework.$framework.$.tsx b/app/routes/ranger.$version.docs.framework.$framework.$.tsx
new file mode 100644
index 00000000..b7ee8136
--- /dev/null
+++ b/app/routes/ranger.$version.docs.framework.$framework.$.tsx
@@ -0,0 +1,45 @@
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
+import { repo, getBranch } from '~/projects/ranger'
+import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { seo } from '~/utils/seo'
+import { useLoaderData, useParams } from '@remix-run/react'
+import { Doc } from '~/components/Doc'
+import { loadDocs } from '~/utils/docs'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { '*': docsPath, framework, version } = context.params
+  const { url } = context.request
+
+  return loadDocs({
+    repo,
+    branch: getBranch(version),
+    docPath: `docs/framework/${framework}/${docsPath}`,
+    currentPath: url,
+    redirectPath: url.replace(/\/docs.*/, '/docs/overview'),
+  })
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return seo({
+    title: `${data?.title} | TanStack Ranger Docs`,
+    description: data?.description,
+  })
+}
+
+export const ErrorBoundary = DefaultErrorBoundary
+
+export default function RouteDocs() {
+  const { title, content, filePath } = useLoaderData<typeof loader>()
+  const { version } = useParams()
+  const branch = getBranch(version)
+
+  return (
+    <Doc
+      title={title}
+      content={content}
+      repo={repo}
+      branch={branch}
+      filePath={filePath}
+    />
+  )
+}
diff --git a/app/routes/ranger.$version.docs.framework.$framework._index.tsx b/app/routes/ranger.$version.docs.framework.$framework._index.tsx
new file mode 100644
index 00000000..6f686156
--- /dev/null
+++ b/app/routes/ranger.$version.docs.framework.$framework._index.tsx
@@ -0,0 +1,6 @@
+import { redirect } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  throw redirect(context.request.url.replace(/\/docs.*/, '/docs/overview'))
+}
diff --git a/app/routes/ranger.v1.docs.examples.$.tsx b/app/routes/ranger.$version.docs.framework.$framework.examples.$.tsx
similarity index 76%
rename from app/routes/ranger.v1.docs.examples.$.tsx
rename to app/routes/ranger.$version.docs.framework.$framework.examples.$.tsx
index a9a11226..586087b4 100644
--- a/app/routes/ranger.v1.docs.examples.$.tsx
+++ b/app/routes/ranger.$version.docs.framework.$framework.examples.$.tsx
@@ -1,36 +1,36 @@
 import * as React from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
-import { useLoaderData } from '@remix-run/react'
+import { useLoaderData, useParams } from '@remix-run/react'
 import { DocTitle } from '~/components/DocTitle'
-import { repo, v1branch } from '~/projects/ranger'
+import { repo, getBranch } from '~/projects/ranger'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  const { '*': examplePath } = context.params
-  const [kind, _name] = (examplePath ?? '').split('/')
-  const [name, search] = _name.split('?')
+  const { framework, '*': name } = context.params
 
-  return json({ kind, name, search: search ?? '' })
+  return json({ framework, name })
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return seo({
-    title: `${capitalize(data.kind)} Ranger ${slugToTitle(
+    title: `${capitalize(data.framework)} Ranger ${slugToTitle(
       data.name
     )} Example | TanStack Ranger Docs`,
     description: `An example showing how to implement ${slugToTitle(
       data.name
-    )} in ${capitalize(data.kind)} Ranger`,
+    )} in ${capitalize(data.framework)} Ranger`,
   })
 }
 
 export default function RouteReactRangerDocs() {
-  const { kind, name, search } = useLoaderData<typeof loader>()
+  const { framework, name } = useLoaderData<typeof loader>()
+  const { version } = useParams()
+  const branch = getBranch(version)
 
-  const examplePath = [kind, name].join('/')
+  const examplePath = [framework, name].join('/')
 
   const [isDark, setIsDark] = React.useState(true)
 
@@ -38,11 +38,11 @@ export default function RouteReactRangerDocs() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const githubUrl = `https://github.com/${repo}/tree/${v1branch}/examples/${examplePath}`
-  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
+  const githubUrl = `https://github.com/${repo}/tree/${branch}/examples/${examplePath}`
+  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${branch}/examples/${examplePath}?embed=1&theme=${
     isDark ? 'dark' : 'light'
   }`
-  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
+  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${branch}/examples/${examplePath}?embed=1&theme=${
     isDark ? 'dark' : 'light'
   }`
 
@@ -51,7 +51,7 @@ export default function RouteReactRangerDocs() {
       <div className="p-4 lg:p-6">
         <DocTitle>
           <span>
-            {capitalize(kind)} Example: {slugToTitle(name)}
+            {capitalize(framework)} Example: {slugToTitle(name)}
           </span>
           <div className="flex items-center gap-4 flex-wrap font-normal text-xs">
             <a
diff --git a/app/routes/ranger.v1.docs.examples._index.tsx b/app/routes/ranger.$version.docs.framework.$framework.examples._index.tsx
similarity index 61%
rename from app/routes/ranger.v1.docs.examples._index.tsx
rename to app/routes/ranger.$version.docs.framework.$framework.examples._index.tsx
index 7ad9846d..e99fb415 100644
--- a/app/routes/ranger.v1.docs.examples._index.tsx
+++ b/app/routes/ranger.$version.docs.framework.$framework.examples._index.tsx
@@ -2,7 +2,5 @@ import { redirect } from '@remix-run/node'
 import type { LoaderFunction } from '@remix-run/node'
 
 export const loader: LoaderFunction = (context) => {
-  throw redirect(
-    context.request.url.replace(/\/examples.*/, '/examples/react/basic')
-  )
+  throw redirect(context.request.url.replace(/\/examples.*/, '/examples/basic'))
 }
diff --git a/app/routes/ranger.$version.docs.tsx b/app/routes/ranger.$version.docs.tsx
new file mode 100644
index 00000000..910c1fbb
--- /dev/null
+++ b/app/routes/ranger.$version.docs.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
+import {
+  useRangerDocsConfig,
+  repo,
+  getBranch,
+  createLogo,
+} from '~/projects/ranger'
+import { seo } from '~/utils/seo'
+import { DocsLayout } from '~/components/DocsLayout'
+import { getTanstackDocsConfig } from '~/utils/config'
+import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node'
+import { availableVersions } from '~/projects/form'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const { version } = context.params
+  const branch = getBranch(version)
+
+  if (!availableVersions.concat('latest').includes(version!)) {
+    throw redirect(context.request.url.replace(version!, 'latest'))
+  }
+
+  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+
+  return json({
+    tanstackDocsConfig,
+    version,
+  })
+}
+
+export const meta: MetaFunction = () => {
+  return seo({
+    title: 'TanStack Ranger Docs | React Ranger',
+    description: 'Modern and headless ranger UI library',
+  })
+}
+
+export default function DocsRoute() {
+  const { version, tanstackDocsConfig } = useLoaderData<typeof loader>()
+  let config = useRangerDocsConfig(tanstackDocsConfig)
+  return (
+    <DocsLayout
+      v2={true}
+      logo={createLogo(version)}
+      colorFrom={'from-lime-500'}
+      colorTo={'to-emerald-500'}
+      textColor={'text-emerald-500'}
+      config={config}
+      framework={config.frameworkConfig}
+      version={config.versionConfig}
+    >
+      <Outlet />
+    </DocsLayout>
+  )
+}
diff --git a/app/routes/ranger.v1.tsx b/app/routes/ranger.$version.tsx
similarity index 90%
rename from app/routes/ranger.v1.tsx
rename to app/routes/ranger.$version.tsx
index 4fb06422..99ceab97 100644
--- a/app/routes/ranger.v1.tsx
+++ b/app/routes/ranger.$version.tsx
@@ -1,5 +1,6 @@
 import { Link, Outlet, useLocation, useSearchParams } from '@remix-run/react'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
 
 export const ErrorBoundary = DefaultErrorBoundary
 
@@ -10,6 +11,10 @@ export default function RouteReactRouter() {
   const show = params.get('from') === 'reactLocationV2'
   const original = params.get('original')
 
+  if (!useClientOnlyRender()) {
+    return null
+  }
+
   return (
     <>
       {show ? (
diff --git a/app/routes/ranger.tsx b/app/routes/ranger.tsx
index 5cfcc89a..7b98cd7f 100644
--- a/app/routes/ranger.tsx
+++ b/app/routes/ranger.tsx
@@ -13,8 +13,11 @@ export const meta: MetaFunction = () => {
 }
 
 export const loader = async (context: LoaderFunctionArgs) => {
-  if (!context.request.url.includes('/ranger/v')) {
-    return redirect(`${new URL(context.request.url).origin}/ranger/v1`)
+  if (
+    !context.request.url.includes('/ranger/v') &&
+    !context.request.url.includes('/ranger/latest')
+  ) {
+    return redirect(`${new URL(context.request.url).origin}/ranger/latest`)
   }
 
   return new Response('OK')
diff --git a/app/routes/ranger.v1.docs.$.tsx b/app/routes/ranger.v1.docs.$.tsx
deleted file mode 100644
index 49545dc8..00000000
--- a/app/routes/ranger.v1.docs.$.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useLoaderData } from '@remix-run/react'
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
-import { json } from '@remix-run/node'
-import { extractFrontMatter, fetchRepoFile } from '~/utils/documents.server'
-import { repo, v1branch } from '~/projects/ranger'
-import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
-import { seo } from '~/utils/seo'
-import removeMarkdown from 'remove-markdown'
-import { Doc } from '~/components/Doc'
-
-export const loader = async (context: LoaderFunctionArgs) => {
-  const { '*': docsPath } = context.params
-
-  if (!docsPath) {
-    throw new Error('Invalid docs path')
-  }
-
-  const filePath = `docs/${docsPath}.md`
-
-  const file = await fetchRepoFile('tanstack/ranger', v1branch, filePath)
-
-  if (!file) {
-    throw new Response('Not Found', {
-      status: 404,
-    })
-  }
-
-  const frontMatter = extractFrontMatter(file)
-  const description = removeMarkdown(frontMatter.excerpt ?? '')
-
-  return json(
-    {
-      title: frontMatter.data.title,
-      description,
-      filePath,
-      content: frontMatter.content,
-    },
-    {
-      headers: {
-        'Cache-Control': 's-maxage=1, stale-while-revalidate=300',
-      },
-    }
-  )
-}
-
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  return seo({
-    title: `${data?.title ?? 'Docs'} | TanStack Ranger Docs`,
-    description: data?.description,
-  })
-}
-
-export const ErrorBoundary = DefaultErrorBoundary
-
-export default function RouteReactRangerDocs() {
-  const { title, content, filePath } = useLoaderData<typeof loader>()
-
-  return (
-    <Doc
-      title={title}
-      content={content}
-      repo={repo}
-      branch={v1branch}
-      filePath={filePath}
-    />
-  )
-}
diff --git a/app/routes/ranger.v1.docs.tsx b/app/routes/ranger.v1.docs.tsx
deleted file mode 100644
index 23293858..00000000
--- a/app/routes/ranger.v1.docs.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as React from 'react'
-import { FaDiscord, FaGithub } from 'react-icons/fa'
-import { Link, json, useLoaderData } from '@remix-run/react'
-import type { MetaFunction } from '@remix-run/node'
-import { gradientText, repo, v1branch } from '~/projects/ranger'
-import { seo } from '~/utils/seo'
-import { DocsLayout } from '~/components/DocsLayout'
-import { getTanstackDocsConfig } from '~/utils/config'
-
-export const loader = async () => {
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, v1branch)
-
-  return json({
-    tanstackDocsConfig,
-  })
-}
-
-const logo = (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className={`font-bold`}>
-      <span className={`${gradientText}`}>Ranger</span>{' '}
-      <span className="text-sm align-super">BETA</span>
-    </Link>
-  </>
-)
-
-const localMenu = {
-  label: 'Menu',
-  children: [
-    {
-      label: 'Home',
-      to: '..',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          GitHub <FaGithub className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://github.com/tanstack/ranger',
-    },
-    {
-      label: (
-        <div className="flex items-center gap-2">
-          Discord <FaDiscord className="text-lg opacity-20" />
-        </div>
-      ),
-      to: 'https://tlinz.com/discord',
-    },
-  ],
-}
-
-export const meta: MetaFunction = () => {
-  return seo({
-    title: 'TanStack Ranger Docs | React Ranger',
-    description: 'Modern and scalable routing for React applications',
-  })
-}
-
-export default function DocsRoute() {
-  const { tanstackDocsConfig } = useLoaderData<typeof loader>()
-
-  const config = React.useMemo(
-    () => ({
-      ...tanstackDocsConfig,
-      menu: [localMenu, ...tanstackDocsConfig.menu],
-    }),
-    [tanstackDocsConfig]
-  )
-
-  return (
-    <DocsLayout
-      logo={logo}
-      colorFrom={'from-lime-500'}
-      colorTo={'to-emerald-500'}
-      textColor={'text-emerald-500'}
-      config={config}
-    />
-  )
-}