diff --git a/docs/contributing/docs-and-website-components.md b/docs/contributing/docs-and-website-components.md
index 0166a90f02761..9e878dd542b79 100644
--- a/docs/contributing/docs-and-website-components.md
+++ b/docs/contributing/docs-and-website-components.md
@@ -3,8 +3,6 @@ title: Docs and Website Components
tableOfContentsDepth: 2
---
-import LayerModel from "../../www/src/components/layer-model"
-import HorizontalNavList from "../../www/src/components/horizontal-nav-list"
import Breadcrumb from "../../www/src/components/docs-breadcrumb"
import { itemListContributing } from "../../www/src/utils/sidebar/item-list"
import TableOfContents from "../../www/src/components/docs-table-of-contents"
@@ -130,14 +128,6 @@ Rendered, the component looks like this:
To improve is to change, so to be perfect is to have changed often.
----
-
-## Other available components
-
-Other less commonly used components aren't globally available, but can imported at the top of a Markdown file and used in other docs.
-
----
-
### Layer Model
The `` was made to help explain concepts of how Gatsby works at a high level. It conceptually breaks Gatsby into different layers and shows how data is pulled, aggregated, and eventually rendered as an app. It's used on docs pages to help explain how Gatsby works at different levels.
@@ -168,7 +158,7 @@ When used, it looks like this:
### Horizontal Navigation List
-The `` was made for the [Glossary](/docs/glossary/), and renders a list of links to alphabetical subheadings on the page in a horizontal format. Because of its specific use case, it isn't made globally available but can be imported if needed on other pages.
+The `` was made for the [Glossary](/docs/glossary/), and renders a list of links to alphabetical subheadings on the page in a horizontal format.
#### Usage
@@ -212,6 +202,14 @@ items={[
slug={props.slug}
/>
+---
+
+## Other available components
+
+Other less commonly used components aren't globally available, but can imported at the top of a Markdown file and used in other docs.
+
+---
+
### Breadcrumb
The `` component is used in layout files to display the hierarchy of pages a user is currently browsing on.
diff --git a/docs/contributing/index.mdx b/docs/contributing/index.mdx
index 798daf0fa908b..07b3cdef0fa9a 100644
--- a/docs/contributing/index.mdx
+++ b/docs/contributing/index.mdx
@@ -3,8 +3,6 @@ title: Contributing to Gatsby.js
disableTableOfContents: true
---
-import EmailCaptureForm from "../../www/src/components/email-capture-form"
-
Thanks for being interested in contributing! We're so glad you want to help!
Below you'll find guides on the Gatsby.js community, code of conduct, and how to get started contributing:
diff --git a/docs/docs/building-with-components.md b/docs/docs/building-with-components.md
index 0e6ad132c61f5..d72ce3144cfd7 100644
--- a/docs/docs/building-with-components.md
+++ b/docs/docs/building-with-components.md
@@ -2,8 +2,6 @@
title: Building with Components
---
-import LayerModel from "../../www/src/components/layer-model"
-
To use Gatsby, you will need a basic understanding of React components.
The [official tutorial](https://reactjs.org/tutorial/tutorial.html)
diff --git a/docs/docs/gatsby-lifecycle-apis.md b/docs/docs/gatsby-lifecycle-apis.md
index 8497bcd9c35ac..64d7780705d65 100644
--- a/docs/docs/gatsby-lifecycle-apis.md
+++ b/docs/docs/gatsby-lifecycle-apis.md
@@ -2,8 +2,6 @@
title: Gatsby Lifecycle APIs
---
-import LayerModel from "../../www/src/components/layer-model"
-
Gatsby provides a rich set of lifecycle APIs to hook into its bootstrap,
build, and client runtime operations.
diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md
index 18244e65d6a16..6aa376ee52228 100644
--- a/docs/docs/glossary.md
+++ b/docs/docs/glossary.md
@@ -3,8 +3,6 @@ title: Glossary
disableTableOfContents: true
---
-import HorizontalNavList from "../../www/src/components/horizontal-nav-list.js"
-
When you're new to Gatsby there can be a lot of words to learn. This glossary aims to give you a 10,000-foot overview of common terms and what they mean for Gatsby sites.
_This is a high-level overview about the steps in the Gatsby build process. For more detailed information about specific steps, check out the [Gatsby Internals](/docs/gatsby-internals) section of the docs._
diff --git a/www/src/gatsby-plugin-theme-ui/components.js b/www/src/gatsby-plugin-theme-ui/components.js
index 6bc258040b085..93739e05f16fb 100644
--- a/www/src/gatsby-plugin-theme-ui/components.js
+++ b/www/src/gatsby-plugin-theme-ui/components.js
@@ -5,6 +5,9 @@ import HubspotForm from "../components/hubspot-form"
import Pullquote from "../components/shared/pullquote"
import EggheadEmbed from "../components/shared/egghead-embed"
import DateChart from "../components/chart"
+import LayerModel from "../components/layer-model"
+import EmailCaptureForm from "../components/email-capture-form"
+import HorizontalNavList from "../components/horizontal-nav-list"
import CodeBlock from "../components/code-block"
export default {
@@ -13,5 +16,8 @@ export default {
DateChart,
Pullquote,
EggheadEmbed,
+ LayerModel,
+ EmailCaptureForm,
+ HorizontalNavList,
pre: ({ children }) => {children},
}