diff --git a/docs/pages/components/Line.mdx b/docs/pages/components/Line.mdx
new file mode 100644
index 000000000..3ca027cf7
--- /dev/null
+++ b/docs/pages/components/Line.mdx
@@ -0,0 +1,16 @@
+---
+title: Line
+description: A primitive component to display a divider line.
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/Line/index.tsx
+---
+
+import { Line } from '@deque/cauldron-react'
+
+## Examples
+
+```jsx example
+<Line />
+```
+
+## Props
+<ComponentProps className={true} />
\ No newline at end of file
diff --git a/docs/patterns/components/Line/index.js b/docs/patterns/components/Line/index.js
deleted file mode 100644
index 0a5422173..000000000
--- a/docs/patterns/components/Line/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import Demo from '../../../Demo';
-import { Line } from '@deque/cauldron-react';
-import { className } from '../../../props';
-
-const LineDemo = () => (
-  <Demo
-    component={Line}
-    componentDescription={'Displays a horizontal line.'}
-    states={[{}]}
-    propDocs={{
-      className
-    }}
-  />
-);
-
-LineDemo.displayName = 'LineDemo';
-
-export default LineDemo;