diff --git a/packages/react/components/Ux/index.mjs b/packages/react/components/Ux/index.mjs
index 84065e334f6..6b9346d8a65 100644
--- a/packages/react/components/Ux/index.mjs
+++ b/packages/react/components/Ux/index.mjs
@@ -1,8 +1,16 @@
 import React from 'react'
 import { CircleIcon } from '@freesewing/react/components/Icon'
 
+/**
+ * A component to display the UX (control) setting
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {number} [props.ux = 0] - The value of the ux/control setting
+ * @returns {JSX.Element}
+ */
 export const Ux = ({ ux = 0 }) => (
-  <div className="flex flex-row">
+  <div className="tw:flex tw:flex-row">
     {[0, 1, 2, 3, 4].map((i) => (
       <CircleIcon
         key={i}
@@ -14,8 +22,14 @@ export const Ux = ({ ux = 0 }) => (
   </div>
 )
 
+/**
+ * A component to display a mini version of the UX (control) setting
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {number} [props.ux = 0] - The value of the ux/control setting
+ * @returns {JSX.Element}
+ */
 export const UxMini = ({ ux = 0 }) => (
-  <div className="flex flex-row">
-    <CircleIcon className={`tw:w-6 tw:h-6 tw:stroke-secondary tw:fill-secondary/20`} label={ux} />
-  </div>
+  <CircleIcon className={`tw:w-6 tw:h-6 tw:stroke-secondary tw:fill-secondary/20`} label={ux} />
 )
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index fe7e2ec5f27..eed6bb19d25 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -40,3 +40,4 @@ jsdoc -c jsdoc.json components/Tab/* > ../../sites/dev/prebuild/jsdoc/react/comp
 jsdoc -c jsdoc.json components/Table/* > ../../sites/dev/prebuild/jsdoc/react/components/table.json
 jsdoc -c jsdoc.json components/Time/* > ../../sites/dev/prebuild/jsdoc/react/components/time.json
 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
diff --git a/sites/dev/docs/reference/packages/react/components/ux/_examples.js b/sites/dev/docs/reference/packages/react/components/ux/_examples.js
new file mode 100644
index 00000000000..c871cdae6e5
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/ux/_examples.js
@@ -0,0 +1,5 @@
+import React from 'react'
+import { Ux, UxMini } from '@freesewing/react/components/Ux'
+
+export const UxExample = () => <Ux ux={4} />
+export const UxMiniExample = () => <UxMini ux={4} />
diff --git a/sites/dev/docs/reference/packages/react/components/ux/readme.mdx b/sites/dev/docs/reference/packages/react/components/ux/readme.mdx
index 996c0d5f03a..ed7b33e9e25 100644
--- a/sites/dev/docs/reference/packages/react/components/ux/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/ux/readme.mdx
@@ -2,6 +2,28 @@
 title: Ux
 ---
 
-:::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.ux.mjs'
+import { UxExample, UxMiniExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Ux** component family provides the following components:
+
+- [Ux](#ux)
+- [UxMini](#uxmini)
+
+### Ux
+
+<ComponentDocs docs={jsdoc.jsdocUx} example={UxExample} />
+
+### UxMini
+
+<ComponentDocs docs={jsdoc.jsdocUxMini} example={UxMiniExample} />
+
+</DocusaurusDoc>