diff --git a/docs/docs/codes/_keyboard-consumer.md b/docs/docs/codes/_keyboard-consumer.md
new file mode 100644
index 00000000000..2f50ea4beea
--- /dev/null
+++ b/docs/docs/codes/_keyboard-consumer.md
@@ -0,0 +1,8 @@
+:::info[Keyboard vs. Consumer keycodes]
+In the below tables, there are keycode pairs with similar names where one variant has a `K_` prefix and another `C_`.
+These variants correspond to similarly named usages from different [HID usage pages](https://usb.org/sites/default/files/hut1_2.pdf#page=16),
+namely the "keyboard/keypad" and "consumer" ones respectively.
+
+In practice, some OS and applications might listen to only one of the variants.
+You can use the values in the compatibility columns below to assist you in selecting which one to use.
+:::
diff --git a/docs/docs/codes/applications.mdx b/docs/docs/codes/applications.mdx
index 538e50a4be4..2dd53dcaf2e 100644
--- a/docs/docs/codes/applications.mdx
+++ b/docs/docs/codes/applications.mdx
@@ -6,8 +6,8 @@ hide_title: true
import OsLegend from "@site/src/components/codes/OsLegend";
import ToastyContainer from "@site/src/components/codes/ToastyContainer";
-import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
import Content, { toc as contentToc } from "./_applications.mdx";
+import KeyboardConsumer from "./_keyboard-consumer.md";
export const toc = contentToc;
diff --git a/docs/docs/codes/editing.mdx b/docs/docs/codes/editing.mdx
index 7caadacc659..8dc0488e93e 100644
--- a/docs/docs/codes/editing.mdx
+++ b/docs/docs/codes/editing.mdx
@@ -7,7 +7,7 @@ hide_title: true
import OsLegend from "@site/src/components/codes/OsLegend";
import ToastyContainer from "@site/src/components/codes/ToastyContainer";
import Content, { toc as contentToc } from "./_editing.mdx";
-import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
+import KeyboardConsumer from "./_keyboard-consumer.md";
export const toc = contentToc;
diff --git a/docs/docs/codes/index.mdx b/docs/docs/codes/index.mdx
index 892bd497413..c8d84122abd 100644
--- a/docs/docs/codes/index.mdx
+++ b/docs/docs/codes/index.mdx
@@ -5,8 +5,6 @@ hide_title: true
slug: ./
---
-import SpellingCaution from "@site/src/components/codes/SpellingCaution";
-import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
import OsLegend from "@site/src/components/codes/OsLegend";
import ToastyContainer from "@site/src/components/codes/ToastyContainer";
import Key, { toc as keyToc } from "./_keyboard-keypad.mdx";
@@ -15,6 +13,7 @@ import Media, { toc as mediaToc } from "./_media.mdx";
import Applications, { toc as applicationsToc } from "./_applications.mdx";
import InputAssist, { toc as inputAssistToc } from "./_input-assist.mdx";
import Power, { toc as powerToc } from "./_power.mdx";
+import KeyboardConsumer from "./_keyboard-consumer.md";
export const toc = [
...keyToc,
@@ -25,7 +24,11 @@ export const toc = [
...powerToc,
];
-
+:::warning
+Take extra notice of the spelling of the keycodes, especially the shorthand spelling.
+Otherwise, it will result in an elusive parsing error!
+:::
+
diff --git a/docs/docs/codes/media.mdx b/docs/docs/codes/media.mdx
index b0e5c2c050a..bbbae6e5bee 100644
--- a/docs/docs/codes/media.mdx
+++ b/docs/docs/codes/media.mdx
@@ -7,7 +7,7 @@ hide_title: true
import OsLegend from "@site/src/components/codes/OsLegend";
import ToastyContainer from "@site/src/components/codes/ToastyContainer";
import Content, { toc as contentToc } from "./_media.mdx";
-import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
+import KeyboardConsumer from "./_keyboard-consumer.md";
export const toc = contentToc;
diff --git a/docs/docs/codes/power.mdx b/docs/docs/codes/power.mdx
index af8405ab1a3..925cd3f8255 100644
--- a/docs/docs/codes/power.mdx
+++ b/docs/docs/codes/power.mdx
@@ -7,7 +7,7 @@ hide_title: true
import OsLegend from "@site/src/components/codes/OsLegend";
import ToastyContainer from "@site/src/components/codes/ToastyContainer";
import Content, { toc as contentToc } from "./_power.mdx";
-import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
+import KeyboardConsumer from "./_keyboard-consumer.md";
export const toc = contentToc;
diff --git a/docs/src/components/codes/KeyboardConsumer.jsx b/docs/src/components/codes/KeyboardConsumer.jsx
deleted file mode 100644
index 94f64146ccf..00000000000
--- a/docs/src/components/codes/KeyboardConsumer.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright (c) 2024 The ZMK Contributors
- *
- * SPDX-License-Identifier: CC-BY-NC-SA-4.0
- */
-
-import Admonition from "@theme/Admonition";
-
-export default function KeyboardConsumer() {
- return (
-
-
- In the below tables, there are keycode pairs with similar names where
- one variant has a K_ prefix and another C_.
- These variants correspond to similarly named usages from different{" "}
-
- HID usage pages
-
- , namely the "keyboard/keypad" and "consumer" ones respectively.
-
-
- In practice, some OS and applications might listen to only one of the
- variants. You can use the values in the compatibility columns below to
- assist you in selecting which one to use.
-
-
- );
-}
-
-KeyboardConsumer.propTypes = {};
diff --git a/docs/src/components/codes/SpellingCaution.jsx b/docs/src/components/codes/SpellingCaution.jsx
deleted file mode 100644
index 84e6f800581..00000000000
--- a/docs/src/components/codes/SpellingCaution.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Copyright (c) 2020 The ZMK Contributors
- *
- * SPDX-License-Identifier: CC-BY-NC-SA-4.0
- */
-
-import Admonition from "@theme/Admonition";
-
-export default function SpellingCaution() {
- return (
-
-
- Take extra notice of the spelling of the keycodes, especially the
- shorthand spelling. Otherwise, it will result in an elusive parsing
- error!
-
-
- );
-}
-
-SpellingCaution.propTypes = {};