diff --git a/apps/v4/hooks/use-mobile.ts b/apps/v4/hooks/use-mobile.ts
index 29c7c8749b0..e7df4530c01 100644
--- a/apps/v4/hooks/use-mobile.ts
+++ b/apps/v4/hooks/use-mobile.ts
@@ -1,17 +1,26 @@
 import * as React from "react"
 
-export function useIsMobile(mobileBreakpoint = 768) {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+const MOBILE_BREAKPOINT = 768
+const MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
 
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < mobileBreakpoint)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < mobileBreakpoint)
-    return () => mql.removeEventListener("change", onChange)
-  }, [mobileBreakpoint])
+function subscribe(callback: () => void) {
+  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)
 
-  return !!isMobile
+  mql.addEventListener("change", callback)
+
+  return () => {
+    mql.removeEventListener("change", callback)
+  }
+}
+
+function getSnapshot() {
+  return window.matchMedia(MOBILE_MEDIA_QUERY).matches
+}
+
+function getServerSnapshot() {
+  return false
+}
+
+export function useIsMobile() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
diff --git a/apps/v4/public/r/styles/base-luma/use-mobile.json b/apps/v4/public/r/styles/base-luma/use-mobile.json
index bdf2d2edd8a..619b577491f 100644
--- a/apps/v4/public/r/styles/base-luma/use-mobile.json
+++ b/apps/v4/public/r/styles/base-luma/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-luma/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/use-mobile.json b/apps/v4/public/r/styles/base-lyra/use-mobile.json
index 110df38fcb3..6c01773ce49 100644
--- a/apps/v4/public/r/styles/base-lyra/use-mobile.json
+++ b/apps/v4/public/r/styles/base-lyra/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/use-mobile.json b/apps/v4/public/r/styles/base-maia/use-mobile.json
index b58254728ac..05da798a0db 100644
--- a/apps/v4/public/r/styles/base-maia/use-mobile.json
+++ b/apps/v4/public/r/styles/base-maia/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/use-mobile.json b/apps/v4/public/r/styles/base-mira/use-mobile.json
index c48f9732faa..3cbde7d465f 100644
--- a/apps/v4/public/r/styles/base-mira/use-mobile.json
+++ b/apps/v4/public/r/styles/base-mira/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/use-mobile.json b/apps/v4/public/r/styles/base-nova/use-mobile.json
index ad153495f1f..a2415bdf55c 100644
--- a/apps/v4/public/r/styles/base-nova/use-mobile.json
+++ b/apps/v4/public/r/styles/base-nova/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-rhea/use-mobile.json b/apps/v4/public/r/styles/base-rhea/use-mobile.json
index 52de42e944a..b733c465fa6 100644
--- a/apps/v4/public/r/styles/base-rhea/use-mobile.json
+++ b/apps/v4/public/r/styles/base-rhea/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-rhea/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/use-mobile.json b/apps/v4/public/r/styles/base-sera/use-mobile.json
index 28f30e725a7..d27cd30f8c8 100644
--- a/apps/v4/public/r/styles/base-sera/use-mobile.json
+++ b/apps/v4/public/r/styles/base-sera/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/use-mobile.json b/apps/v4/public/r/styles/base-vega/use-mobile.json
index 0379c7a727a..a9c4674cecf 100644
--- a/apps/v4/public/r/styles/base-vega/use-mobile.json
+++ b/apps/v4/public/r/styles/base-vega/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/use-mobile.json b/apps/v4/public/r/styles/new-york-v4/use-mobile.json
index fd5acab15bb..a10e9154916 100644
--- a/apps/v4/public/r/styles/new-york-v4/use-mobile.json
+++ b/apps/v4/public/r/styles/new-york-v4/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/use-mobile.json b/apps/v4/public/r/styles/radix-luma/use-mobile.json
index e4e317c30bd..96b71a33843 100644
--- a/apps/v4/public/r/styles/radix-luma/use-mobile.json
+++ b/apps/v4/public/r/styles/radix-luma/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-luma/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/use-mobile.json b/apps/v4/public/r/styles/radix-lyra/use-mobile.json
index 6f68130e606..98116c74ea2 100644
--- a/apps/v4/public/r/styles/radix-lyra/use-mobile.json
+++ b/apps/v4/public/r/styles/radix-lyra/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/use-mobile.json b/apps/v4/public/r/styles/radix-maia/use-mobile.json
index 9d3ed10c8d1..863ae344a4c 100644
--- a/apps/v4/public/r/styles/radix-maia/use-mobile.json
+++ b/apps/v4/public/r/styles/radix-maia/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/use-mobile.json b/apps/v4/public/r/styles/radix-mira/use-mobile.json
index 1385ad530e4..bb23201b060 100644
--- a/apps/v4/public/r/styles/radix-mira/use-mobile.json
+++ b/apps/v4/public/r/styles/radix-mira/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/use-mobile.json b/apps/v4/public/r/styles/radix-nova/use-mobile.json
index a275e793102..a2d4a012f0a 100644
--- a/apps/v4/public/r/styles/radix-nova/use-mobile.json
+++ b/apps/v4/public/r/styles/radix-nova/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-rhea/use-mobile.json b/apps/v4/public/r/styles/radix-rhea/use-mobile.json
index 6a24d2cf654..9414ba42ac2 100644
--- a/apps/v4/public/r/styles/radix-rhea/use-mobile.json
+++ b/apps/v4/public/r/styles/radix-rhea/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-rhea/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/use-mobile.json b/apps/v4/public/r/styles/radix-sera/use-mobile.json
index 88f9d21bee9..2206728c5cc 100644
--- a/apps/v4/public/r/styles/radix-sera/use-mobile.json
+++ b/apps/v4/public/r/styles/radix-sera/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/use-mobile.json b/apps/v4/public/r/styles/radix-vega/use-mobile.json
index 605dfa2ae3b..4995c12b930 100644
--- a/apps/v4/public/r/styles/radix-vega/use-mobile.json
+++ b/apps/v4/public/r/styles/radix-vega/use-mobile.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\nconst MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`\n\nfunction subscribe(callback: () => void) {\n  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)\n\n  mql.addEventListener(\"change\", callback)\n\n  return () => {\n    mql.removeEventListener(\"change\", callback)\n  }\n}\n\nfunction getSnapshot() {\n  return window.matchMedia(MOBILE_MEDIA_QUERY).matches\n}\n\nfunction getServerSnapshot() {\n  return false\n}\n\nexport function useIsMobile() {\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/v4/registry/bases/base/hooks/use-mobile.ts b/apps/v4/registry/bases/base/hooks/use-mobile.ts
index 2b0fe1dfef3..e7df4530c01 100644
--- a/apps/v4/registry/bases/base/hooks/use-mobile.ts
+++ b/apps/v4/registry/bases/base/hooks/use-mobile.ts
@@ -1,19 +1,26 @@
 import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
+const MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
 
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+function subscribe(callback: () => void) {
+  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)
+
+  mql.addEventListener("change", callback)
+
+  return () => {
+    mql.removeEventListener("change", callback)
+  }
+}
 
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+function getSnapshot() {
+  return window.matchMedia(MOBILE_MEDIA_QUERY).matches
+}
+
+function getServerSnapshot() {
+  return false
+}
 
-  return !!isMobile
+export function useIsMobile() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
diff --git a/apps/v4/registry/bases/radix/hooks/use-mobile.ts b/apps/v4/registry/bases/radix/hooks/use-mobile.ts
index 2b0fe1dfef3..e7df4530c01 100644
--- a/apps/v4/registry/bases/radix/hooks/use-mobile.ts
+++ b/apps/v4/registry/bases/radix/hooks/use-mobile.ts
@@ -1,19 +1,26 @@
 import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
+const MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
 
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+function subscribe(callback: () => void) {
+  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)
+
+  mql.addEventListener("change", callback)
+
+  return () => {
+    mql.removeEventListener("change", callback)
+  }
+}
 
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+function getSnapshot() {
+  return window.matchMedia(MOBILE_MEDIA_QUERY).matches
+}
+
+function getServerSnapshot() {
+  return false
+}
 
-  return !!isMobile
+export function useIsMobile() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
diff --git a/apps/v4/registry/new-york-v4/hooks/use-mobile.ts b/apps/v4/registry/new-york-v4/hooks/use-mobile.ts
index 2b0fe1dfef3..e7df4530c01 100644
--- a/apps/v4/registry/new-york-v4/hooks/use-mobile.ts
+++ b/apps/v4/registry/new-york-v4/hooks/use-mobile.ts
@@ -1,19 +1,26 @@
 import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
+const MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
 
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+function subscribe(callback: () => void) {
+  const mql = window.matchMedia(MOBILE_MEDIA_QUERY)
+
+  mql.addEventListener("change", callback)
+
+  return () => {
+    mql.removeEventListener("change", callback)
+  }
+}
 
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+function getSnapshot() {
+  return window.matchMedia(MOBILE_MEDIA_QUERY).matches
+}
+
+function getServerSnapshot() {
+  return false
+}
 
-  return !!isMobile
+export function useIsMobile() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }