diff --git a/docs/docs/codes/index.mdx b/docs/docs/codes/index.mdx
index 6a2fbdc8..a701b4ce 100644
--- a/docs/docs/codes/index.mdx
+++ b/docs/docs/codes/index.mdx
@@ -5,6 +5,7 @@ hide_title: true
 slug: ./
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 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";
@@ -23,6 +24,7 @@ export const toc = [
   ...powerToc,
 ];
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 <Key />
diff --git a/docs/src/components/codes/SpellingCaution.jsx b/docs/src/components/codes/SpellingCaution.jsx
new file mode 100644
index 00000000..15ba9488
--- /dev/null
+++ b/docs/src/components/codes/SpellingCaution.jsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import Admonition from "@theme/Admonition";
+
+export default function SpellingCaution() {
+  return (
+    <Admonition type="caution">
+      <p>
+        Take extra notice of the spelling of the keycodes, especially the
+        shorthand spelling. Otherwise, it will result in an elusive parsing
+        error!
+      </p>
+    </Admonition>
+  );
+}
+
+SpellingCaution.propTypes = {};