From fc47045aa5acdb1de3d0b9f6ca12fa447d7f8455 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Thu, 17 Sep 2026 15:59:12 +0530
Subject: [PATCH 1/2] feat: add a GitHub Sponsors button to the docs navbar

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/docs-shell.tsx     |  2 ++
 components/github-sponsor.tsx | 22 ++++++++++++++++++++++
 lib/github.ts                 |  5 +++++
 3 files changed, 29 insertions(+)
 create mode 100644 components/github-sponsor.tsx

diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index f5df8e0..7bac962 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -12,6 +12,7 @@ import { usePathname } from "next/navigation"
 
 import { DocsSidebar } from "@/components/docs-sidebar"
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
+import { GithubSponsor } from "@/components/github-sponsor"
 import { GithubStars } from "@/components/github-stars"
 import { Logo } from "@/components/logo"
 import { SearchTrigger } from "@/components/search-trigger"
@@ -181,6 +182,7 @@ 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" />
+              <GithubSponsor className="shrink-0" />
               <GithubStars stars={githubStars} className="shrink-0" />
               <ThemeToggle />
             </div>
diff --git a/components/github-sponsor.tsx b/components/github-sponsor.tsx
new file mode 100644
index 0000000..6506b43
--- /dev/null
+++ b/components/github-sponsor.tsx
@@ -0,0 +1,22 @@
+import { RiHeart3Line } from "@remixicon/react"
+
+import { getGithubSponsorUrl } from "@/lib/github"
+import { cn } from "@/lib/utils"
+
+export function GithubSponsor({ className }: { className?: string }) {
+  return (
+    <a
+      href={getGithubSponsorUrl()}
+      target="_blank"
+      rel="noreferrer"
+      aria-label="Sponsor on GitHub"
+      className={cn(
+        "inline-flex h-8 items-center gap-1.5 rounded-xl px-2.5 text-sm text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+        className
+      )}
+    >
+      <RiHeart3Line className="size-4" />
+      <span className="hidden sm:inline">Sponsor</span>
+    </a>
+  )
+}
diff --git a/lib/github.ts b/lib/github.ts
index 0315fa4..d5c2789 100644
--- a/lib/github.ts
+++ b/lib/github.ts
@@ -1,9 +1,14 @@
 const REPO = "radiumcoders/23rd.dev"
+const OWNER = REPO.split("/")[0]
 
 export function getGithubRepoUrl() {
   return `https://github.com/${REPO}`
 }
 
+export function getGithubSponsorUrl() {
+  return `https://github.com/sponsors/${OWNER}`
+}
+
 export function formatStarCount(count: number) {
   return new Intl.NumberFormat("en", {
     notation: "compact",

From 40b329cebd2091fa82b5371b36d6cf81d4d332b3 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Thu, 17 Sep 2026 16:07:25 +0530
Subject: [PATCH 2/2] fix: collapse docs search to an icon so the navbar fits

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/docs-shell.tsx     | 18 +++++++-----------
 components/search-trigger.tsx | 29 +++++------------------------
 2 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index 7bac962..9a366ef 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -178,17 +178,13 @@ export function DocsShell({
           </SidebarContent>
         </Sidebar>
         <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
-          <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" />
-              <GithubSponsor className="shrink-0" />
-              <GithubStars stars={githubStars} className="shrink-0" />
-              <ThemeToggle />
-            </div>
-            <div className="flex w-56 shrink-0 items-center border-l px-2">
-              <SearchTrigger />
-            </div>
+          <header className="flex h-14 min-w-0 shrink-0 items-center gap-1 border-b px-4">
+            <DocsSidebarTrigger showWhenCollapsed />
+            <div className="min-w-0 flex-1" />
+            <GithubSponsor className="shrink-0" />
+            <GithubStars stars={githubStars} className="shrink-0" />
+            <SearchTrigger />
+            <ThemeToggle />
           </header>
           <div className="relative min-h-0 flex-1 overflow-hidden">
             <div
diff --git a/components/search-trigger.tsx b/components/search-trigger.tsx
index a37d402..608d5ab 100644
--- a/components/search-trigger.tsx
+++ b/components/search-trigger.tsx
@@ -1,19 +1,14 @@
 "use client"
 
-import { useEffect, useState } from "react"
 import { Dialog } from "@base-ui/react/dialog"
 import { useSearchContext } from "fumadocs-ui/contexts/search"
 import { RiSearchLine } from "@remixicon/react"
 
+import { buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 
 export function SearchTrigger({ className }: { className?: string }) {
-  const { enabled, dialogHandle, hotKey } = useSearchContext()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+  const { enabled, dialogHandle } = useSearchContext()
 
   if (!enabled) return null
 
@@ -22,27 +17,13 @@ export function SearchTrigger({ className }: { className?: string }) {
       handle={dialogHandle}
       type="button"
       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",
+        buttonVariants({ variant: "ghost", size: "icon-sm" }),
+        "text-muted-foreground hover:text-foreground",
         className
       )}
       aria-label="Open search"
     >
-      <RiSearchLine className="size-4 shrink-0" />
-      <span className="min-w-0 flex-1 truncate text-left">Search</span>
-      {mounted ? (
-        <span className="hidden shrink-0 items-center gap-0.5 sm:inline-flex">
-          {hotKey.map((k, i) => (
-            <kbd
-              key={i}
-              className="rounded-md bg-muted px-1.5 py-px font-sans text-[11px] font-medium text-muted-foreground"
-            >
-              {k.display}
-            </kbd>
-          ))}
-        </span>
-      ) : (
-        <span className="hidden h-[18px] w-14 shrink-0 sm:inline-flex" />
-      )}
+      <RiSearchLine />
     </Dialog.Trigger>
   )
 }