From 0babc9cdbf4910772a2862a5c694f08ab4100a33 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Wed, 16 Sep 2026 20:37:42 +0530
Subject: [PATCH 1/3] feat: fill the docs chrome edge-to-edge and split panes
 with borders

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/docs/[[...slug]]/page.tsx |  54 ++++++++---------
 app/docs/template.tsx         |   2 +-
 components/docs-shell.tsx     | 110 ++++------------------------------
 components/docs-sidebar.tsx   |   3 +-
 components/docs-toc.tsx       |   4 +-
 5 files changed, 42 insertions(+), 131 deletions(-)

diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 68e9659..94b5f2f 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -26,36 +26,34 @@ export default async function Page(props: {
   const MDX = page.data.body
 
   return (
-    <div className="w-full px-4 py-8 md:px-6 md:py-12">
-      <div className="mx-auto flex w-full max-w-5xl justify-center gap-12">
-        <article className="w-full min-w-0 max-w-2xl">
-          <JsonLd
-            data={docsJsonLd({
-              title: page.data.title,
-              description: page.data.description,
-              path: docsPath(params.slug),
-              slug: params.slug,
+    <div className="flex min-h-full w-full">
+      <article className="min-w-0 flex-1 px-6 py-8 md:px-10 md:py-10">
+        <JsonLd
+          data={docsJsonLd({
+            title: page.data.title,
+            description: page.data.description,
+            path: docsPath(params.slug),
+            slug: params.slug,
+          })}
+        />
+        <h1 className="text-3xl font-semibold tracking-tight">
+          {page.data.title}
+        </h1>
+        {page.data.description ? (
+          <p className="mt-3 text-lg text-muted-foreground">
+            {page.data.description}
+          </p>
+        ) : null}
+        <div className="prose mt-8">
+          <MDX
+            components={getMDXComponents({
+              a: createRelativeLink(source, page),
             })}
           />
-          <h1 className="text-3xl font-semibold tracking-tight">
-            {page.data.title}
-          </h1>
-          {page.data.description ? (
-            <p className="mt-3 text-lg text-muted-foreground">
-              {page.data.description}
-            </p>
-          ) : null}
-          <div className="prose mt-8">
-            <MDX
-              components={getMDXComponents({
-                a: createRelativeLink(source, page),
-              })}
-            />
-          </div>
-          <DocsPager tree={source.getPageTree()} url={page.url} />
-        </article>
-        <DocsToc items={page.data.toc} />
-      </div>
+        </div>
+        <DocsPager tree={source.getPageTree()} url={page.url} />
+      </article>
+      <DocsToc items={page.data.toc} />
     </div>
   )
 }
diff --git a/app/docs/template.tsx b/app/docs/template.tsx
index 42d9a20..e65af0e 100644
--- a/app/docs/template.tsx
+++ b/app/docs/template.tsx
@@ -11,7 +11,7 @@ import { ViewTransition } from "react"
 export default function DocsTemplate({ children }: { children: ReactNode }) {
   return (
     <ViewTransition enter="page-blur" exit="page-blur" default="none">
-      <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+      <div className="min-h-full">{children}</div>
     </ViewTransition>
   )
 }
diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index dc817b5..c9440c7 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -1,12 +1,6 @@
 "use client"
 
-import {
-  useEffect,
-  useId,
-  useRef,
-  type CSSProperties,
-  type ReactNode,
-} from "react"
+import { useEffect, useRef, type CSSProperties, type ReactNode } from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 
@@ -16,7 +10,6 @@ import { GithubStars } from "@/components/github-stars"
 import { Logo } from "@/components/logo"
 import { SearchTrigger } from "@/components/search-trigger"
 import { FrameworkProvider } from "@/lib/framework"
-import { cn } from "@/lib/utils"
 import {
   Sidebar,
   SidebarContent,
@@ -28,7 +21,7 @@ import {
 const sidebarTokens: CSSProperties = {
   "--sidebar": "var(--background)",
   "--sidebar-foreground": "var(--foreground)",
-  "--sidebar-border": "transparent",
+  "--sidebar-border": "var(--border)",
   "--sidebar-accent": "color-mix(in oklch, var(--foreground) 6%, transparent)",
   "--sidebar-accent-foreground": "var(--foreground)",
   "--sidebar-ring": "var(--ring)",
@@ -46,80 +39,8 @@ type FolderNode = {
 type RootNode = { type?: "root"; name: ReactNode; children: TreeNode[] }
 type TreeNode = PageNode | SeparatorNode | FolderNode
 
-const EDGE_BLUR_LAYERS = [
-  { std: 5, opaque: 0, fade: 24 },
-  { std: 3, opaque: 0, fade: 44 },
-  { std: 2, opaque: 10, fade: 66 },
-  { std: 1, opaque: 28, fade: 84 },
-  { std: 0.5, opaque: 50, fade: 100 },
-] as const
-
-function DocsEdgeBlurDefs({ uid }: { uid: string }) {
-  return (
-    <svg
-      className="pointer-events-none absolute size-0 overflow-hidden"
-      aria-hidden
-    >
-      <defs>
-        {EDGE_BLUR_LAYERS.map((layer, i) => (
-          <filter
-            key={i}
-            id={`docs-edge-blur-${i}-${uid}`}
-            x="-10%"
-            y="-50%"
-            width="120%"
-            height="200%"
-            colorInterpolationFilters="sRGB"
-          >
-            <feGaussianBlur in="SourceGraphic" stdDeviation={layer.std} />
-          </filter>
-        ))}
-      </defs>
-    </svg>
-  )
-}
-
-function WindowEdgeFade({
-  edge,
-  uid,
-}: {
-  edge: "top" | "bottom"
-  uid: string
-}) {
-  const isTop = edge === "top"
-  const dir = isTop ? "to bottom" : "to top"
-
-  return (
-    <div
-      aria-hidden
-      className={cn(
-        "pointer-events-none absolute inset-x-0 z-10 h-16",
-        isTop ? "top-0 rounded-t-2xl" : "bottom-0 rounded-b-2xl"
-      )}
-    >
-      {EDGE_BLUR_LAYERS.map((layer, i) => {
-        const mask = `linear-gradient(${dir}, black ${layer.opaque}%, transparent ${layer.fade}%)`
-        return (
-          <div
-            key={i}
-            className="absolute inset-0"
-            style={{
-              backdropFilter: `url(#docs-edge-blur-${i}-${uid})`,
-              WebkitBackdropFilter: `url(#docs-edge-blur-${i}-${uid})`,
-              maskImage: mask,
-              WebkitMaskImage: mask,
-            }}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
 /**
- * Docs chrome: canvas sidebar + a real inset content window.
- * The window is a flex column; the article scrolls inside it so the ring,
- * corners, and shadow never have to be faked with overlays.
+ * Docs chrome: full-viewport panes split by borders.
  */
 export function DocsShell({
   tree,
@@ -132,7 +53,6 @@ export function DocsShell({
 }) {
   const pathname = usePathname()
   const scrollRef = useRef<HTMLDivElement>(null)
-  const blurUid = useId().replace(/:/g, "")
 
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: 0 })
@@ -161,11 +81,9 @@ export function DocsShell({
         <Sidebar
           id="docs-sidebar"
           aria-label="Documentation"
-          variant="inset"
           collapsible="offcanvas"
-          className="p-3"
         >
-          <SidebarHeader className="flex h-14 flex-row items-center gap-2 px-4">
+          <SidebarHeader className="flex h-14 flex-row items-center gap-2 border-b px-4 py-0">
             <Link
               href="/docs"
               className="flex min-w-0 items-center gap-2 text-sm font-medium"
@@ -179,24 +97,20 @@ export function DocsShell({
             <DocsSidebar tree={tree} embedded />
           </SidebarContent>
         </Sidebar>
-        <SidebarInset className="relative z-10 m-3 min-h-0 min-w-0 overflow-hidden rounded-2xl bg-background ring-1 ring-black/10 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_0_24px_rgba(0,0,0,0.06)] md:peer-data-[variant=inset]:m-3 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-3 dark:ring-white/12 dark:shadow-[0_1px_2px_rgba(0,0,0,0.2),0_0_28px_rgba(0,0,0,0.35)]">
-          <div
-            ref={scrollRef}
-            data-docs-window-scroll
-            className="absolute inset-0 overflow-y-auto overscroll-y-contain pt-14 pb-10"
-          >
-            {children}
-          </div>
-          <DocsEdgeBlurDefs uid={blurUid} />
-          <WindowEdgeFade edge="top" uid={blurUid} />
-          <WindowEdgeFade edge="bottom" uid={blurUid} />
-          <header className="absolute inset-x-0 top-0 z-20 flex h-14 items-center gap-3 px-4 md:px-6">
+        <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
+          <header className="flex h-14 shrink-0 items-center gap-3 border-b px-4">
             <DocsSidebarTrigger showWhenCollapsed />
             <div className="ml-auto flex items-center gap-1">
               <GithubStars stars={githubStars} />
               <SearchTrigger />
             </div>
           </header>
+          <div
+            ref={scrollRef}
+            className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain"
+          >
+            {children}
+          </div>
         </SidebarInset>
       </SidebarProvider>
     </FrameworkProvider>
diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index d209174..4b0aa1d 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -271,11 +271,10 @@ export function DocsSidebar({
     <Sidebar
       id={id}
       aria-label="Documentation"
-      variant="inset"
       collapsible="offcanvas"
       className={cn(className)}
     >
-      <SidebarHeader className="flex h-14 flex-row items-center gap-2 px-4">
+      <SidebarHeader className="flex h-14 flex-row items-center gap-2 border-b px-4 py-0">
         <Link
           href="/docs"
           className="flex min-w-0 items-center gap-2 text-sm font-medium"
diff --git a/components/docs-toc.tsx b/components/docs-toc.tsx
index 9f5132e..0b95e7a 100644
--- a/components/docs-toc.tsx
+++ b/components/docs-toc.tsx
@@ -14,8 +14,8 @@ export function DocsToc({ items }: { items: TOCItemType[] }) {
   if (items.length === 0) return null
 
   return (
-    <aside className="hidden w-44 shrink-0 xl:block">
-      <div className="sticky top-16">
+    <aside className="hidden w-56 shrink-0 border-l xl:block">
+      <div className="sticky top-0 px-5 py-8">
         <p className="mb-3 text-sm font-medium text-muted-foreground">
           On this page
         </p>

From e85d78b8c3dcd6d6e6aed243962c2242b37a0ec8 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Wed, 16 Sep 2026 20:53:16 +0530
Subject: [PATCH 2/3] feat: add a docs theme toggle and keep article centered
 beside the TOC

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/docs/[[...slug]]/page.tsx |  50 ++++++++--------
 components/docs-shell.tsx     | 108 ++++++++++++++++++++++++++++++----
 components/search-trigger.tsx |  17 ++++--
 components/theme-toggle.tsx   |  27 +++++++++
 4 files changed, 162 insertions(+), 40 deletions(-)
 create mode 100644 components/theme-toggle.tsx

diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 94b5f2f..2451817 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -27,32 +27,34 @@ export default async function Page(props: {
 
   return (
     <div className="flex min-h-full w-full">
-      <article className="min-w-0 flex-1 px-6 py-8 md:px-10 md:py-10">
-        <JsonLd
-          data={docsJsonLd({
-            title: page.data.title,
-            description: page.data.description,
-            path: docsPath(params.slug),
-            slug: params.slug,
-          })}
-        />
-        <h1 className="text-3xl font-semibold tracking-tight">
-          {page.data.title}
-        </h1>
-        {page.data.description ? (
-          <p className="mt-3 text-lg text-muted-foreground">
-            {page.data.description}
-          </p>
-        ) : null}
-        <div className="prose mt-8">
-          <MDX
-            components={getMDXComponents({
-              a: createRelativeLink(source, page),
+      <div className="flex min-w-0 flex-1 justify-center px-6 py-8 md:px-10 md:py-12">
+        <article className="w-full min-w-0 max-w-2xl">
+          <JsonLd
+            data={docsJsonLd({
+              title: page.data.title,
+              description: page.data.description,
+              path: docsPath(params.slug),
+              slug: params.slug,
             })}
           />
-        </div>
-        <DocsPager tree={source.getPageTree()} url={page.url} />
-      </article>
+          <h1 className="text-3xl font-semibold tracking-tight">
+            {page.data.title}
+          </h1>
+          {page.data.description ? (
+            <p className="mt-3 text-lg text-muted-foreground">
+              {page.data.description}
+            </p>
+          ) : null}
+          <div className="prose mt-8">
+            <MDX
+              components={getMDXComponents({
+                a: createRelativeLink(source, page),
+              })}
+            />
+          </div>
+          <DocsPager tree={source.getPageTree()} url={page.url} />
+        </article>
+      </div>
       <DocsToc items={page.data.toc} />
     </div>
   )
diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index c9440c7..ac00de5 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -1,6 +1,12 @@
 "use client"
 
-import { useEffect, useRef, type CSSProperties, type ReactNode } from "react"
+import {
+  useEffect,
+  useId,
+  useRef,
+  type CSSProperties,
+  type ReactNode,
+} from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 
@@ -9,7 +15,9 @@ import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
 import { GithubStars } from "@/components/github-stars"
 import { Logo } from "@/components/logo"
 import { SearchTrigger } from "@/components/search-trigger"
+import { ThemeToggle } from "@/components/theme-toggle"
 import { FrameworkProvider } from "@/lib/framework"
+import { cn } from "@/lib/utils"
 import {
   Sidebar,
   SidebarContent,
@@ -39,6 +47,76 @@ type FolderNode = {
 type RootNode = { type?: "root"; name: ReactNode; children: TreeNode[] }
 type TreeNode = PageNode | SeparatorNode | FolderNode
 
+const EDGE_BLUR_LAYERS = [
+  { std: 5, opaque: 0, fade: 24 },
+  { std: 3, opaque: 0, fade: 44 },
+  { std: 2, opaque: 10, fade: 66 },
+  { std: 1, opaque: 28, fade: 84 },
+  { std: 0.5, opaque: 50, fade: 100 },
+] as const
+
+function DocsEdgeBlurDefs({ uid }: { uid: string }) {
+  return (
+    <svg
+      className="pointer-events-none absolute size-0 overflow-hidden"
+      aria-hidden
+    >
+      <defs>
+        {EDGE_BLUR_LAYERS.map((layer, i) => (
+          <filter
+            key={i}
+            id={`docs-edge-blur-${i}-${uid}`}
+            x="-10%"
+            y="-50%"
+            width="120%"
+            height="200%"
+            colorInterpolationFilters="sRGB"
+          >
+            <feGaussianBlur in="SourceGraphic" stdDeviation={layer.std} />
+          </filter>
+        ))}
+      </defs>
+    </svg>
+  )
+}
+
+function WindowEdgeFade({
+  edge,
+  uid,
+}: {
+  edge: "top" | "bottom"
+  uid: string
+}) {
+  const isTop = edge === "top"
+  const dir = isTop ? "to bottom" : "to top"
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-x-0 z-10 h-16 xl:right-56",
+        isTop ? "top-0" : "bottom-0"
+      )}
+    >
+      {EDGE_BLUR_LAYERS.map((layer, i) => {
+        const mask = `linear-gradient(${dir}, black ${layer.opaque}%, transparent ${layer.fade}%)`
+        return (
+          <div
+            key={i}
+            className="absolute inset-0"
+            style={{
+              backdropFilter: `url(#docs-edge-blur-${i}-${uid})`,
+              WebkitBackdropFilter: `url(#docs-edge-blur-${i}-${uid})`,
+              maskImage: mask,
+              WebkitMaskImage: mask,
+            }}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
 /**
  * Docs chrome: full-viewport panes split by borders.
  */
@@ -53,6 +131,7 @@ export function DocsShell({
 }) {
   const pathname = usePathname()
   const scrollRef = useRef<HTMLDivElement>(null)
+  const blurUid = useId().replace(/:/g, "")
 
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: 0 })
@@ -98,18 +177,27 @@ export function DocsShell({
           </SidebarContent>
         </Sidebar>
         <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
-          <header className="flex h-14 shrink-0 items-center gap-3 border-b px-4">
-            <DocsSidebarTrigger showWhenCollapsed />
-            <div className="ml-auto flex items-center gap-1">
-              <GithubStars stars={githubStars} />
+          <header className="flex h-14 min-w-0 shrink-0 border-b">
+            <div className="flex min-w-0 flex-1 items-center gap-1 px-4">
+              <DocsSidebarTrigger showWhenCollapsed />
+              <div className="min-w-0 flex-1" />
+              <ThemeToggle />
+              <GithubStars stars={githubStars} className="shrink-0" />
+            </div>
+            <div className="flex w-56 shrink-0 items-center border-l px-2">
               <SearchTrigger />
             </div>
           </header>
-          <div
-            ref={scrollRef}
-            className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain"
-          >
-            {children}
+          <div className="relative min-h-0 flex-1 overflow-hidden">
+            <div
+              ref={scrollRef}
+              className="absolute inset-0 overflow-y-auto overscroll-y-contain"
+            >
+              {children}
+            </div>
+            <DocsEdgeBlurDefs uid={blurUid} />
+            <WindowEdgeFade edge="top" uid={blurUid} />
+            <WindowEdgeFade edge="bottom" uid={blurUid} />
           </div>
         </SidebarInset>
       </SidebarProvider>
diff --git a/components/search-trigger.tsx b/components/search-trigger.tsx
index a4899e0..a37d402 100644
--- a/components/search-trigger.tsx
+++ b/components/search-trigger.tsx
@@ -5,7 +5,9 @@ import { Dialog } from "@base-ui/react/dialog"
 import { useSearchContext } from "fumadocs-ui/contexts/search"
 import { RiSearchLine } from "@remixicon/react"
 
-export function SearchTrigger() {
+import { cn } from "@/lib/utils"
+
+export function SearchTrigger({ className }: { className?: string }) {
   const { enabled, dialogHandle, hotKey } = useSearchContext()
   const [mounted, setMounted] = useState(false)
 
@@ -19,13 +21,16 @@ export function SearchTrigger() {
     <Dialog.Trigger
       handle={dialogHandle}
       type="button"
-      className="inline-flex h-8 items-center gap-2 rounded-xl px-2.5 text-sm text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+      className={cn(
+        "flex h-8 w-full min-w-0 items-center gap-2 rounded-2xl bg-input/50 px-2.5 text-sm text-muted-foreground outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30",
+        className
+      )}
       aria-label="Open search"
     >
-      <RiSearchLine className="size-4" />
-      <span className="hidden sm:inline">Search</span>
+      <RiSearchLine className="size-4 shrink-0" />
+      <span className="min-w-0 flex-1 truncate text-left">Search</span>
       {mounted ? (
-        <span className="hidden items-center gap-0.5 sm:inline-flex">
+        <span className="hidden shrink-0 items-center gap-0.5 sm:inline-flex">
           {hotKey.map((k, i) => (
             <kbd
               key={i}
@@ -36,7 +41,7 @@ export function SearchTrigger() {
           ))}
         </span>
       ) : (
-        <span className="hidden h-[18px] w-14 sm:inline-flex" />
+        <span className="hidden h-[18px] w-14 shrink-0 sm:inline-flex" />
       )}
     </Dialog.Trigger>
   )
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 0000000..484d19b
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { RiMoonLine, RiSunLine } from "@remixicon/react"
+
+import { Button } from "@/components/ui/button"
+import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
+import { cn } from "@/lib/utils"
+
+export function ThemeToggle({ className }: { className?: string }) {
+  const { setTheme } = useTheme()
+  const theme = useHydratedTheme()
+  const isDark = theme === "dark"
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      className={cn("text-muted-foreground hover:text-foreground", className)}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+    >
+      {isDark ? <RiMoonLine /> : <RiSunLine />}
+    </Button>
+  )
+}

From 05e368e68ea3ef08ef725646fd71449931afe7b8 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Wed, 16 Sep 2026 20:59:36 +0530
Subject: [PATCH 3/3] fix: sit the docs theme toggle to the right of the star
 count

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/docs-shell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index ac00de5..f5df8e0 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -181,8 +181,8 @@ export function DocsShell({
             <div className="flex min-w-0 flex-1 items-center gap-1 px-4">
               <DocsSidebarTrigger showWhenCollapsed />
               <div className="min-w-0 flex-1" />
-              <ThemeToggle />
               <GithubStars stars={githubStars} className="shrink-0" />
+              <ThemeToggle />
             </div>
             <div className="flex w-56 shrink-0 items-center border-l px-2">
               <SearchTrigger />