diff --git a/packages/react/components/Highlight/index.mjs b/packages/react/components/Highlight/index.mjs
index ea15919c5cf..8a820a9d281 100644
--- a/packages/react/components/Highlight/index.mjs
+++ b/packages/react/components/Highlight/index.mjs
@@ -12,13 +12,17 @@ const defaultTitles = {
 /**
  * A React component to highlight code
  *
- * @params {object} props - All React props
- * @params  {string} language - The language to highlight
- * @params {object} children - The React children
- * @params {bool} raw - Set this to true to not escape tags
- * @params {string} title - Title for the highlight
- * @params {string} copy - Content to copy to clipboard
- * @params {bool} noCopy - Do not add copy to clipboard
+ * @component
+ * @param {object} props - All React props
+ * @param {string} [props.language = 'txt'] - The language to highlight
+ * @param {JSX.Element} props.children - The React children (this is the code to highlight)
+ * @param {bool} [props.raw = false] - Set this to true to not escape tags
+ * @param {string} [props.title = false] - Title for the highlight. When
+ * language is js, bash, sh, json, or yaml the title will be set accordingly
+ * (but you can still pass in a custom one)
+ * @param {string} [props.copy = props.children] - Content for the copy to clipboard button, by default this will use props.children
+ * @param {bool} [props.noCopy = false]  - Set this to true to not add the copy to clipboard button
+ * @returns {JSX.Element}
  */
 export const Highlight = ({
   language = 'txt',
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index dcca979189d..e892c49456e 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -12,3 +12,4 @@ jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/rea
 jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json
 jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json
 jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json
+jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/react/components/highlight.json
diff --git a/sites/dev/docs/reference/packages/react/components/highlight/_examples.js b/sites/dev/docs/reference/packages/react/components/highlight/_examples.js
new file mode 100644
index 00000000000..ca85a078418
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/highlight/_examples.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Highlight } from '@freesewing/react/components/Highlight'
+
+export const HighlightExample = () => (
+  <Highlight language="js">{[
+    `import { Highlight } from '@freesewing/react/components/Highlight'`,
+    ``,
+    `<Highlight language="js">This is an example</Highlight>`,
+  ].join("\n")}</Highlight>
+)
+
diff --git a/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx b/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx
index 357cbdff35f..e086cd9bf7e 100644
--- a/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx
@@ -2,6 +2,20 @@
 title: Highlight
 ---
 
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import { jsdocHighlight } from '@site/prebuild/jsdoc/components.highlight.mjs'
+import { HighlightExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Highlight** component family provides the following components:
+
+- [Highlight](#highlight)
+
+## Highlight
+
+<ComponentDocs docs={jsdocHighlight} example={HighlightExample} />
+
+
+</DocusaurusDoc>