diff --git a/sites/docs/src/lib/registry/default/hook/is-mobile.svelte.ts b/sites/docs/src/lib/registry/default/hook/is-mobile.svelte.ts
index 87bea4b1c..a34b2040f 100644
--- a/sites/docs/src/lib/registry/default/hook/is-mobile.svelte.ts
+++ b/sites/docs/src/lib/registry/default/hook/is-mobile.svelte.ts
@@ -1,27 +1,9 @@
-import { untrack } from "svelte";
+import { MediaQuery } from "svelte/reactivity";
 
 const MOBILE_BREAKPOINT = 768;
 
-export class IsMobile {
-	#current = $state<boolean>(false);
-
+export class IsMobile extends MediaQuery {
 	constructor() {
-		$effect(() => {
-			return untrack(() => {
-				const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-				const onChange = () => {
-					this.#current = window.innerWidth < MOBILE_BREAKPOINT;
-				};
-				mql.addEventListener("change", onChange);
-				onChange();
-				return () => {
-					mql.removeEventListener("change", onChange);
-				};
-			});
-		});
-	}
-
-	get current() {
-		return this.#current;
+		super(`max-width: ${MOBILE_BREAKPOINT - 1}px`);
 	}
 }
diff --git a/sites/docs/src/lib/registry/new-york/hook/is-mobile.svelte.ts b/sites/docs/src/lib/registry/new-york/hook/is-mobile.svelte.ts
index 87bea4b1c..a34b2040f 100644
--- a/sites/docs/src/lib/registry/new-york/hook/is-mobile.svelte.ts
+++ b/sites/docs/src/lib/registry/new-york/hook/is-mobile.svelte.ts
@@ -1,27 +1,9 @@
-import { untrack } from "svelte";
+import { MediaQuery } from "svelte/reactivity";
 
 const MOBILE_BREAKPOINT = 768;
 
-export class IsMobile {
-	#current = $state<boolean>(false);
-
+export class IsMobile extends MediaQuery {
 	constructor() {
-		$effect(() => {
-			return untrack(() => {
-				const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-				const onChange = () => {
-					this.#current = window.innerWidth < MOBILE_BREAKPOINT;
-				};
-				mql.addEventListener("change", onChange);
-				onChange();
-				return () => {
-					mql.removeEventListener("change", onChange);
-				};
-			});
-		});
-	}
-
-	get current() {
-		return this.#current;
+		super(`max-width: ${MOBILE_BREAKPOINT - 1}px`);
 	}
 }