diff --git a/docs/src/components/kbd.tsx b/docs/src/components/kbd.tsx
index 5cc744dd6..b4de641b0 100644
--- a/docs/src/components/kbd.tsx
+++ b/docs/src/components/kbd.tsx
@@ -1,3 +1,4 @@
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import { useContext } from "react";
 import "./kbd.css";
 import type { Platform } from "./platformcontext";
@@ -39,7 +40,7 @@ function convertKey(platform: Platform, key: string): [any, string, boolean] {
 }
 
 // Custom KBD component
-export const Kbd = ({ k }) => {
+const KbdInternal = ({ k }: { k: string }) => {
     const { platform } = useContext(PlatformContext);
     const keys = k.split(":");
     const keyElems = keys.map((key, i) => {
@@ -51,9 +52,8 @@ export const Kbd = ({ k }) => {
         );
     });
     return <div className="kbd-group">{keyElems}</div>;
-
-    // const { platform } = useContext(PlatformContext);
-    // const keyLabel = platform === "mac" && k === "Cmd" ? "Cmd" : k === "Cmd" ? "Alt" : k;
-
-    // return <kbd>{k}</kbd>;
+};
+
+export const Kbd = ({ k }: { k: string }) => {
+    return <BrowserOnly fallback={<kbd>{k}</kbd>}>{() => <KbdInternal k={k} />}</BrowserOnly>;
 };
diff --git a/docs/src/components/platformcontext.tsx b/docs/src/components/platformcontext.tsx
index 3a67b4a8a..da04a31a3 100644
--- a/docs/src/components/platformcontext.tsx
+++ b/docs/src/components/platformcontext.tsx
@@ -1,3 +1,4 @@
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import { createContext, ReactNode, useContext, useState } from "react";
 
 import "./platformcontext.css";
@@ -19,7 +20,7 @@ const detectPlatform = (): Platform => {
     return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? "mac" : "linux";
 };
 
-export const PlatformProvider = ({ children }: { children: ReactNode }) => {
+const PlatformProviderInternal = ({ children }: { children: ReactNode }) => {
     const [platform, setPlatform] = useState<Platform>(detectPlatform());
 
     const togglePlatform = () => {
@@ -31,6 +32,14 @@ export const PlatformProvider = ({ children }: { children: ReactNode }) => {
     return <PlatformContext.Provider value={{ platform, togglePlatform }}>{children}</PlatformContext.Provider>;
 };
 
+export const PlatformProvider: React.FC = ({ children }: { children: ReactNode }) => {
+    return (
+        <BrowserOnly fallback={<div />}>
+            {() => <PlatformProviderInternal>{children}</PlatformProviderInternal>}
+        </BrowserOnly>
+    );
+};
+
 export const usePlatform = (): PlatformContextProps => {
     const context = useContext(PlatformContext);
     if (!context) {
@@ -39,7 +48,7 @@ export const usePlatform = (): PlatformContextProps => {
     return context;
 };
 
-export const PlatformToggleButton: React.FC = () => {
+const PlatformToggleButtonInternal: React.FC = () => {
     const { platform, togglePlatform } = usePlatform();
 
     return (
@@ -59,3 +68,7 @@ export const PlatformToggleButton: React.FC = () => {
         </div>
     );
 };
+
+export const PlatformToggleButton: React.FC = () => {
+    return <BrowserOnly fallback={<div />}>{() => <PlatformToggleButtonInternal />}</BrowserOnly>;
+};