diff --git a/packages/react/components/Yaml/index.mjs b/packages/react/components/Yaml/index.mjs
index 538bb48b740..b54509b2ab5 100644
--- a/packages/react/components/Yaml/index.mjs
+++ b/packages/react/components/Yaml/index.mjs
@@ -3,6 +3,18 @@ import { Highlight } from '@freesewing/react/components/Highlight'
 import hljs from 'highlight.js/lib/common'
 import yaml from 'js-yaml'
 
+/**
+ * A component to code-highlight YAML data
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - Use this if you are not using props.json or props.js to pass the YAML data
+ * @param {object} [props.js = undefined] - Use this to pass the YAML data as Javascript Object
+ * @param {string} [props.json = undefined] - Use this to pass the YAML data as JSON
+ * @param {bool} [props.noCopy = false]  - Set this to true to not add the copy to clipboard button
+ * @param {string} [props.title = "YAML"] - Title for the highlight
+ * @returns {JSX.Element}
+ */
 export const Yaml = (props) => {
   let code
   if (props.json) code = yaml.dump(JSON.parse(props.json))
@@ -11,8 +23,8 @@ export const Yaml = (props) => {
 
   return (
     <Highlight
-      {...props}
       language="yaml"
+      {...props}
       raw={hljs.highlight(code, { language: 'yaml' }).value}
       copy={code}
     />
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index dfc69db9038..a66ef413c9b 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -42,3 +42,4 @@ jsdoc -c jsdoc.json components/Time/* > ../../sites/dev/prebuild/jsdoc/react/com
 jsdoc -c jsdoc.json components/Uuid/* > ../../sites/dev/prebuild/jsdoc/react/components/uuid.json
 jsdoc -c jsdoc.json components/Ux/* > ../../sites/dev/prebuild/jsdoc/react/components/ux.json
 jsdoc -c jsdoc.json components/Xray/* > ../../sites/dev/prebuild/jsdoc/react/components/xray.json
+jsdoc -c jsdoc.json components/Yaml/* > ../../sites/dev/prebuild/jsdoc/react/components/yaml.json
diff --git a/sites/dev/docs/reference/packages/react/components/yaml/_examples.js b/sites/dev/docs/reference/packages/react/components/yaml/_examples.js
new file mode 100644
index 00000000000..62f1b36ecf5
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/yaml/_examples.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Yaml } from '@freesewing/react/components/Yaml'
+
+export const YamlExample = () => <Yaml js={{
+  some: 'yaml',
+  data: 'here',
+  more: {
+    things: {
+      like: ['an', 'array'],
+      or: {
+        a: {
+          number: 12
+        }
+      }
+    }
+  }
+}} />
+
diff --git a/sites/dev/docs/reference/packages/react/components/yaml/readme.mdx b/sites/dev/docs/reference/packages/react/components/yaml/readme.mdx
index 848c9e57c7e..9fef24feac1 100644
--- a/sites/dev/docs/reference/packages/react/components/yaml/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/yaml/readme.mdx
@@ -2,6 +2,23 @@
 title: Yaml
 ---
 
-:::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 * as jsdoc from '@site/prebuild/jsdoc/components.yaml.mjs'
+import { YamlExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Yaml** component family provides the following components:
+
+- [Yaml](#yaml)
+
+### Yaml
+
+<ComponentDocs docs={jsdoc.jsdocYaml} example={YamlExample} />
+
+</DocusaurusDoc>