diff --git a/docs/en-gb/blogs/fix-idea-application-yaml-schema-validation.md b/docs/en-gb/blogs/fix-idea-application-yaml-schema-validation.mdx
similarity index 95%
rename from docs/en-gb/blogs/fix-idea-application-yaml-schema-validation.md
rename to docs/en-gb/blogs/fix-idea-application-yaml-schema-validation.mdx
index e2b2e6a..0a32392 100644
--- a/docs/en-gb/blogs/fix-idea-application-yaml-schema-validation.md
+++ b/docs/en-gb/blogs/fix-idea-application-yaml-schema-validation.mdx
@@ -11,6 +11,8 @@ author:
   email: real@zihluwang.me
 ---
 
+import { Kbd } from "@rspress/core/theme"
+
 Recently, while developing a Spring Boot project in IntelliJ IDEA, I noticed that the smart code completion for `application.yaml` and `application.yml` had suddenly vanished. Worse, the editor was flooded with warnings reading:
 
 > Schema validation: Missing required property 'kind' = 'Application'
@@ -27,7 +29,7 @@ After some digging, I found the culprit. IDEA downloads JSON Schemas from remote
 
 To disable this behaviour immediately:
 
-1. Open **Settings** (Ctrl+Alt+S / Cmd+,)
+1. Open **Settings** (<Kbd>Ctrl</Kbd>+<Kbd>Alt</Kbd>+<Kbd>S</Kbd> for Windows / <Kbd mac="cmd" /> + <Kbd>,</Kbd> for macOS)
 2. Navigate to **Languages & Frameworks → Schemas and DTDs → Remote JSON Schemas**
 3. Uncheck **Allow downloading JSON Schemas from remote sources**
 4. Click **OK**
diff --git a/docs/zh-hans/blogs/fix-idea-application-yaml-schema-validation.md b/docs/zh-hans/blogs/fix-idea-application-yaml-schema-validation.mdx
similarity index 95%
rename from docs/zh-hans/blogs/fix-idea-application-yaml-schema-validation.md
rename to docs/zh-hans/blogs/fix-idea-application-yaml-schema-validation.mdx
index daa8d89..87c35de 100644
--- a/docs/zh-hans/blogs/fix-idea-application-yaml-schema-validation.md
+++ b/docs/zh-hans/blogs/fix-idea-application-yaml-schema-validation.mdx
@@ -11,6 +11,8 @@ author:
   email: real@zihluwang.me
 ---
 
+import { Kbd } from "@rspress/core/theme"
+
 最近在使用 IDEA 开发 Spring Boot 项目时，我发现 `application.yaml` 和 `application.yml` 的智能代码提示突然消失了。更糟糕的是，编辑器中充满了如下警告：
 
 > `Schema validation: Missing required property 'kind' = 'Application'`
@@ -27,7 +29,7 @@ author:
 
 要立即禁用此行为：
 
-1. 打开 **Settings**（Ctrl+Alt+S / Cmd+,）
+1. 打开 **Settings**（Windows：<Kbd>Ctrl</Kbd>+<Kbd>Alt</Kbd>+<Kbd>S</Kbd> / macOS：<Kbd mac="cmd" /> + <Kbd>,</Kbd>）
 2. 导航至 **Languages & Frameworks → Schemas and DTDs → Remote JSON Schemas**
 3. 取消勾选 **Allow downloading JSON Schemas from remote sources**
 4. 点击 **OK**
diff --git a/theme/components/Kbd.tsx b/theme/components/Kbd.tsx
new file mode 100644
index 0000000..b6c210c
--- /dev/null
+++ b/theme/components/Kbd.tsx
@@ -0,0 +1,60 @@
+import type { HTMLAttributes } from "react"
+
+const macOSSymbols: Record<string, string> = {
+  cmd: "⌘",
+  command: "⌘",
+  opt: "⌥",
+  option: "⌥",
+  alt: "⌥",
+  ctrl: "⌃",
+  control: "⌃",
+  shift: "⇧",
+  enter: "↩",
+  return: "↩",
+  tab: "⇥",
+  esc: "⎋",
+  escape: "⎋",
+  delete: "⌫",
+  backspace: "⌫",
+  forwardDelete: "⌦",
+  up: "↑",
+  down: "↓",
+  left: "←",
+  right: "→",
+  space: "␣",
+  fn: "Fn",
+  globe: "🌐",
+  eject: "⏏",
+  power: "⏻",
+  capslock: "⇪",
+  home: "↖",
+  end: "↘",
+  pageup: "⇞",
+  pagedown: "⇟",
+  clear: "⌧",
+}
+
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+  mac?: keyof typeof macOSSymbols
+}
+
+export function Kbd({ children, mac, className = "", ...rest }: KbdProps) {
+  const label = children ?? (mac ? macOSSymbols[mac] : null)
+  if (!label) return null
+
+  return (
+    <kbd
+      className={`inline-flex items-center justify-center min-w-[1.6em] px-1.5 py-0
+        text-[0.85em] leading-normal font-mono
+        rounded-md border border-b-2
+        border-gray-300 dark:border-gray-600
+        bg-gray-50 dark:bg-gray-800
+        text-gray-700 dark:text-gray-300
+        shadow-[0_1px_1px_rgba(0,0,0,0.075)]
+        align-baseline
+        ${className}`.replace(/\s+/g, " ")}
+      {...rest}>
+      {label}
+    </kbd>
+  )
+}
diff --git a/theme/index.tsx b/theme/index.tsx
index 938f23e..828269e 100644
--- a/theme/index.tsx
+++ b/theme/index.tsx
@@ -26,3 +26,4 @@ function DocLayout(props: DocLayoutProps) {
 
 export * from "@rspress/core/theme-original"
 export { DocLayout }
+export { Kbd } from "./components/Kbd"