From 9803e40860a3980c0a5c7b8a69b916354522c891 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Wed, 1 Jul 2026 16:58:25 +0530
Subject: [PATCH 1/3] fix(docs): minimal theme-aware scrollbars across docs UI

---
 app/docs/[[...slug]]/page.tsx |  2 +-
 app/globals.css               | 37 +++++++++++++++++++++++++----------
 components/docs-shell.tsx     |  2 +-
 components/docs-sidebar.tsx   |  2 +-
 components/mdx.tsx            |  6 +++---
 5 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 2cc8cb6..4f1dc79 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -74,7 +74,7 @@ export default async function DocsPage({ params }: DocsPageProps) {
         <MDX components={getMDXComponents()} />
       </article>
       <aside className="fixed top-8 right-6 hidden w-44 xl:block">
-        <div className="flex max-h-[calc(100dvh-4rem)] flex-col gap-2 overflow-y-auto pl-4">
+        <div className="docs-scroll flex max-h-[calc(100dvh-4rem)] flex-col gap-2 overflow-y-auto pl-4">
           <p className="text-xs text-muted-foreground">On this page</p>
           <PageToc />
         </div>
diff --git a/app/globals.css b/app/globals.css
index a0b2d38..767f554 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -155,29 +155,46 @@
   color: var(--foreground);
 }
 
-.docs-sidebar-scroll {
+.docs-scroll {
+  --scroll-thumb: color-mix(in oklab, var(--foreground) 14%, transparent);
+  --scroll-thumb-hover: color-mix(in oklab, var(--foreground) 26%, transparent);
+  --scroll-track: var(--background);
   scrollbar-gutter: stable;
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in oklab, var(--sidebar-foreground) 20%, transparent)
-    transparent;
+  scrollbar-color: transparent transparent;
 }
 
-.docs-sidebar-scroll::-webkit-scrollbar {
+.docs-scroll:hover {
+  scrollbar-color: var(--scroll-thumb) transparent;
+}
+
+.docs-scroll::-webkit-scrollbar {
   width: 0.375rem;
+  height: 0.375rem;
 }
 
-.docs-sidebar-scroll::-webkit-scrollbar-track {
+.docs-scroll::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.docs-sidebar-scroll::-webkit-scrollbar-thumb {
-  border: 2px solid var(--sidebar);
+.docs-scroll::-webkit-scrollbar-thumb {
+  border: 2px solid var(--scroll-track);
   border-radius: 999px;
-  background: color-mix(in oklab, var(--sidebar-foreground) 16%, transparent);
+  background: transparent;
+}
+
+.docs-scroll:hover::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+}
+
+.docs-scroll:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-thumb-hover);
 }
 
-.docs-sidebar-scroll::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in oklab, var(--sidebar-foreground) 28%, transparent);
+.docs-scroll--sidebar {
+  --scroll-thumb: color-mix(in oklab, var(--sidebar-foreground) 14%, transparent);
+  --scroll-thumb-hover: color-mix(in oklab, var(--sidebar-foreground) 26%, transparent);
+  --scroll-track: var(--sidebar);
 }
 
 .docs-content [data-rehype-pretty-code-figure] {
diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index 1c2e83e..f4bc218 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -41,7 +41,7 @@ export function DocsShell({
           </Link>
         }
       />
-      <main className="min-w-0 flex-1 overflow-y-auto">{children}</main>
+      <main className="docs-scroll min-w-0 flex-1 overflow-y-auto">{children}</main>
     </div>
   );
 }
diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index c0b7c4e..6f0ee5e 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -93,7 +93,7 @@ export function DocsSidebar({
     <>
       <aside
         className={cn(
-          "docs-sidebar-scroll fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-y-auto bg-sidebar p-4 text-sidebar-foreground transition-transform duration-200 ease-out md:static md:z-auto md:h-full md:w-52 md:translate-x-0 md:border-r md:border-sidebar-border",
+          "docs-scroll docs-scroll--sidebar fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-y-auto bg-sidebar p-4 text-sidebar-foreground transition-transform duration-200 ease-out md:static md:z-auto md:h-full md:w-52 md:translate-x-0 md:border-r md:border-sidebar-border",
           open ? "translate-x-0" : "-translate-x-full md:translate-x-0",
         )}
       >
diff --git a/components/mdx.tsx b/components/mdx.tsx
index de4efee..66a453a 100644
--- a/components/mdx.tsx
+++ b/components/mdx.tsx
@@ -83,7 +83,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     ),
     table: ({ className, ...props }: ComponentPropsWithoutRef<"table">) => (
       <div className="mt-4 overflow-hidden border border-border bg-background">
-        <div className="overflow-x-auto bg-background">
+        <div className="docs-scroll overflow-x-auto bg-background">
           <table
             className={cn("w-full border-collapse text-left text-sm", className)}
             {...props}
@@ -134,7 +134,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
               </div>
               <figure data-rehype-pretty-code-figure="">
                 <div className="bg-background shadow-none">
-                  <pre className={cn("overflow-x-auto bg-transparent p-0 text-sm", className)} {...props}>
+                  <pre className={cn("docs-scroll overflow-x-auto bg-transparent p-0 text-sm", className)} {...props}>
                     {children}
                   </pre>
                 </div>
@@ -145,7 +145,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
       }
 
       return (
-        <pre className={cn("overflow-x-auto bg-transparent p-0 text-sm", className)} {...props}>
+        <pre className={cn("docs-scroll overflow-x-auto bg-transparent p-0 text-sm", className)} {...props}>
           {children}
         </pre>
       );

From 191357871f0f9e5b897bfe61b9c9fd322d4c0152 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Wed, 1 Jul 2026 17:00:53 +0530
Subject: [PATCH 2/3] fix(docs): replace native Windows scrollbar with minimal
 custom style

---
 app/globals.css | 42 ++++++++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 767f554..412e088 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -156,21 +156,25 @@
 }
 
 .docs-scroll {
-  --scroll-thumb: color-mix(in oklab, var(--foreground) 14%, transparent);
-  --scroll-thumb-hover: color-mix(in oklab, var(--foreground) 26%, transparent);
-  --scroll-track: var(--background);
+  --scroll-thumb: color-mix(in oklab, var(--foreground) 22%, transparent);
+  --scroll-thumb-hover: color-mix(in oklab, var(--foreground) 38%, transparent);
   scrollbar-gutter: stable;
   scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-}
-
-.docs-scroll:hover {
   scrollbar-color: var(--scroll-thumb) transparent;
 }
 
 .docs-scroll::-webkit-scrollbar {
-  width: 0.375rem;
-  height: 0.375rem;
+  width: 6px;
+  height: 6px;
+}
+
+.docs-scroll::-webkit-scrollbar-button,
+.docs-scroll::-webkit-scrollbar-button:single-button,
+.docs-scroll::-webkit-scrollbar-button:single-button:vertical:decrement,
+.docs-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
+  display: none;
+  width: 0;
+  height: 0;
 }
 
 .docs-scroll::-webkit-scrollbar-track {
@@ -178,23 +182,25 @@
 }
 
 .docs-scroll::-webkit-scrollbar-thumb {
-  border: 2px solid var(--scroll-track);
+  min-height: 2.5rem;
+  border: 2px solid transparent;
   border-radius: 999px;
-  background: transparent;
-}
-
-.docs-scroll:hover::-webkit-scrollbar-thumb {
   background: var(--scroll-thumb);
+  background-clip: padding-box;
 }
 
-.docs-scroll:hover::-webkit-scrollbar-thumb:hover {
+.docs-scroll::-webkit-scrollbar-thumb:hover {
   background: var(--scroll-thumb-hover);
+  background-clip: padding-box;
+}
+
+.docs-scroll::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 .docs-scroll--sidebar {
-  --scroll-thumb: color-mix(in oklab, var(--sidebar-foreground) 14%, transparent);
-  --scroll-thumb-hover: color-mix(in oklab, var(--sidebar-foreground) 26%, transparent);
-  --scroll-track: var(--sidebar);
+  --scroll-thumb: color-mix(in oklab, var(--sidebar-foreground) 22%, transparent);
+  --scroll-thumb-hover: color-mix(in oklab, var(--sidebar-foreground) 38%, transparent);
 }
 
 .docs-content [data-rehype-pretty-code-figure] {

From 7f8f5fcb72761b1e35914fbe8e3ccc7cd0db9c18 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Wed, 1 Jul 2026 17:02:22 +0530
Subject: [PATCH 3/3] fix(ui): hide native scrollbars entirely on docs and
 landing pages

---
 app/globals.css                     | 42 ++++++-----------------------
 components/cli-block.tsx            |  4 +--
 components/docs-sidebar.tsx         |  2 +-
 components/landing/landing-page.tsx |  2 +-
 4 files changed, 12 insertions(+), 38 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 412e088..adffb0d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -156,53 +156,27 @@
 }
 
 .docs-scroll {
-  --scroll-thumb: color-mix(in oklab, var(--foreground) 22%, transparent);
-  --scroll-thumb-hover: color-mix(in oklab, var(--foreground) 38%, transparent);
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: var(--scroll-thumb) transparent;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .docs-scroll::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.docs-scroll::-webkit-scrollbar-button,
-.docs-scroll::-webkit-scrollbar-button:single-button,
-.docs-scroll::-webkit-scrollbar-button:single-button:vertical:decrement,
-.docs-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
   display: none;
   width: 0;
   height: 0;
-}
-
-.docs-scroll::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.docs-scroll::-webkit-scrollbar-thumb {
-  min-height: 2.5rem;
-  border: 2px solid transparent;
-  border-radius: 999px;
-  background: var(--scroll-thumb);
-  background-clip: padding-box;
-}
-
-.docs-scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--scroll-thumb-hover);
-  background-clip: padding-box;
-}
-
+.docs-scroll::-webkit-scrollbar-thumb,
+.docs-scroll::-webkit-scrollbar-track,
+.docs-scroll::-webkit-scrollbar-button,
 .docs-scroll::-webkit-scrollbar-corner {
+  display: none;
+  width: 0;
+  height: 0;
   background: transparent;
 }
 
-.docs-scroll--sidebar {
-  --scroll-thumb: color-mix(in oklab, var(--sidebar-foreground) 22%, transparent);
-  --scroll-thumb-hover: color-mix(in oklab, var(--sidebar-foreground) 38%, transparent);
-}
-
 .docs-content [data-rehype-pretty-code-figure] {
   margin-top: 1.5rem;
   overflow: hidden;
diff --git a/components/cli-block.tsx b/components/cli-block.tsx
index 63a5e97..012476f 100644
--- a/components/cli-block.tsx
+++ b/components/cli-block.tsx
@@ -46,7 +46,7 @@ export function CliBlock({ commands }: { commands: string[] }) {
   return (
     <div className="group mt-4 overflow-hidden border border-border bg-background">
       <div className="flex flex-row items-center justify-between gap-2 px-3 pt-2.5 pb-2">
-        <div className="flex min-w-0 items-center gap-1 overflow-x-auto">
+        <div className="docs-scroll flex min-w-0 items-center gap-1 overflow-x-auto">
           {managers.map((manager) => {
             const { icon: Icon, activeTextClassName } = managerMeta[manager];
 
@@ -69,7 +69,7 @@ export function CliBlock({ commands }: { commands: string[] }) {
         <CopyButton className="shrink-0" code={value} />
       </div>
       <div className="bg-background px-4 pb-4 pt-2 text-[13px] text-foreground">
-        <pre className="overflow-x-auto">
+        <pre className="docs-scroll overflow-x-auto">
           <code className="font-mono">{value}</code>
         </pre>
       </div>
diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index 6f0ee5e..ccf96cd 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -93,7 +93,7 @@ export function DocsSidebar({
     <>
       <aside
         className={cn(
-          "docs-scroll docs-scroll--sidebar fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-y-auto bg-sidebar p-4 text-sidebar-foreground transition-transform duration-200 ease-out md:static md:z-auto md:h-full md:w-52 md:translate-x-0 md:border-r md:border-sidebar-border",
+          "docs-scroll fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-y-auto bg-sidebar p-4 text-sidebar-foreground transition-transform duration-200 ease-out md:static md:z-auto md:h-full md:w-52 md:translate-x-0 md:border-r md:border-sidebar-border",
           open ? "translate-x-0" : "-translate-x-full md:translate-x-0",
         )}
       >
diff --git a/components/landing/landing-page.tsx b/components/landing/landing-page.tsx
index bed467f..a2bf650 100644
--- a/components/landing/landing-page.tsx
+++ b/components/landing/landing-page.tsx
@@ -363,7 +363,7 @@ export function LandingPage() {
         </div>
       </header>
 
-      <main className="flex-1 overflow-y-auto">
+      <main className="docs-scroll flex-1 overflow-y-auto">
         <div className="grid grid-cols-2 border-t border-border md:grid-cols-3 xl:border-l xl:border-t-0">
           {showcase.map((item) => (
             <ButtonCell key={item.name} item={item} />