diff --git a/packages/docz-theme-default/src/components/ui/Hr.tsx b/packages/docz-theme-default/src/components/ui/Hr.tsx
new file mode 100644
index 000000000..028c5a7ed
--- /dev/null
+++ b/packages/docz-theme-default/src/components/ui/Hr.tsx
@@ -0,0 +1,12 @@
+import styled from 'react-emotion'
+import { get } from '@utils/theme'
+
+export const Hr = styled('hr')`
+  border: none;
+  border-top: 1px dashed ${get('colors.border')};
+
+  ${p =>
+    p.theme.docz.mq({
+      margin: ['30px 0', '50px 0'],
+    })};
+`
diff --git a/packages/docz-theme-default/src/components/ui/index.tsx b/packages/docz-theme-default/src/components/ui/index.tsx
index 33aeea413..caa73ee64 100644
--- a/packages/docz-theme-default/src/components/ui/index.tsx
+++ b/packages/docz-theme-default/src/components/ui/index.tsx
@@ -4,6 +4,7 @@ export { H3 } from './H3'
 export { H4 } from './H4'
 export { H5 } from './H5'
 export { H6 } from './H6'
+export { Hr } from './Hr'
 export { Blockquote } from './Blockquote'
 export { InlineCode } from './InlineCode'
 export { Link } from './Link'
diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
index aecd9172f..d3eb34161 100644
--- a/packages/docz-theme-default/src/index.tsx
+++ b/packages/docz-theme-default/src/index.tsx
@@ -33,6 +33,7 @@ const Theme = () => (
             h4: components.H4,
             h5: components.H5,
             h6: components.H6,
+            hr: components.Hr,
             ul: components.List,
             p: components.Paragraph,
             a: components.Link,