diff --git a/docs/.vitepress/components/MotionToggle.vue b/docs/.vitepress/components/MotionToggle.vue
index 3a7d284b3..a1d128e8b 100644
--- a/docs/.vitepress/components/MotionToggle.vue
+++ b/docs/.vitepress/components/MotionToggle.vue
@@ -16,17 +16,19 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <SwitchRoot
-    id="motion-toggle"
-    v-model="shouldReduceMotion"
-    class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
-    :aria-label="switchTitle"
-  >
-    <SwitchThumb
-      class="text-muted-foreground bg-background border-muted my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+  <ClientOnly>
+    <SwitchRoot
+      id="motion-toggle"
+      v-model="shouldReduceMotion"
+      class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
+      :aria-label="switchTitle"
     >
-      <Icon v-if="shouldReduceMotion" icon="lucide:square-dashed-mouse-pointer" />
-      <Icon v-else icon="lucide:square-mouse-pointer" />
-    </SwitchThumb>
-  </SwitchRoot>
+      <SwitchThumb
+        class="bg-background text-muted-foreground border-muted my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+      >
+        <Icon v-if="shouldReduceMotion" icon="lucide:square-dashed-mouse-pointer" />
+        <Icon v-else icon="lucide:square-mouse-pointer" />
+      </SwitchThumb>
+    </SwitchRoot>
+  </ClientOnly>
 </template>
diff --git a/docs/.vitepress/components/ThemeToggle.vue b/docs/.vitepress/components/ThemeToggle.vue
index 71fdf3583..97ebef1dd 100644
--- a/docs/.vitepress/components/ThemeToggle.vue
+++ b/docs/.vitepress/components/ThemeToggle.vue
@@ -16,17 +16,19 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <SwitchRoot
-    id="theme-toggle"
-    v-model="isDark"
-    class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
-    :aria-label="switchTitle"
-  >
-    <SwitchThumb
-      class="text-muted-foreground border-muted bg-background my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+  <ClientOnly>
+    <SwitchRoot
+      id="theme-toggle"
+      v-model="isDark"
+      class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
+      :aria-label="switchTitle"
     >
-      <Icon v-if="isDark" icon="lucide:moon-star" />
-      <Icon v-else icon="lucide:sun" />
-    </SwitchThumb>
-  </SwitchRoot>
+      <SwitchThumb
+        class="text-muted-foreground border-muted bg-background my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+      >
+        <Icon v-if="isDark" icon="lucide:moon-star" />
+        <Icon v-else icon="lucide:sun" />
+      </SwitchThumb>
+    </SwitchRoot>
+  </ClientOnly>
 </template>