From a2ff76d90c6b1d88ff3b84c9e4011a43e101ae3c Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Fri, 5 Jun 2020 17:15:31 -0700
Subject: [PATCH] feat: Separate component/api doc templates. Use API template
 for logger and nerdlet apis

---
 src/markdown-pages/apis/logger.mdx            |   2 +-
 src/markdown-pages/apis/nerdlet.mdx           |   2 +-
 .../components/account-picker.mdx             |   2 +-
 .../components/account-storage-mutation.mdx   |   2 +-
 .../components/account-storage-query.mdx      |   2 +-
 .../components/accounts-query.mdx             |   2 +-
 src/markdown-pages/components/area-chart.mdx  |   2 +-
 src/markdown-pages/components/auto-sizer.mdx  |   2 +-
 src/markdown-pages/components/bar-chart.mdx   |   2 +-
 .../components/billboard-chart.mdx            |   2 +-
 src/markdown-pages/components/block-text.mdx  |   2 +-
 src/markdown-pages/components/button.mdx      |   2 +-
 src/markdown-pages/components/card-body.mdx   |   2 +-
 src/markdown-pages/components/card-header.mdx |   2 +-
 src/markdown-pages/components/card.mdx        |   2 +-
 src/markdown-pages/components/chart-group.mdx |   2 +-
 src/markdown-pages/components/checkbox.mdx    |   2 +-
 .../components/dropdown-item.mdx              |   2 +-
 src/markdown-pages/components/dropdown.mdx    |   2 +-
 .../entities-by-domain-type-query.mdx         |   2 +-
 .../components/entities-by-guids-query.mdx    |   2 +-
 .../components/entities-by-name-query.mdx     |   2 +-
 .../components/entity-by-guid-query.mdx       |   2 +-
 .../components/entity-count-query.mdx         |   2 +-
 .../components/entity-search-query.mdx        |   2 +-
 .../components/entity-storage-mutation.mdx    |   2 +-
 .../components/entity-storage-query.mdx       |   2 +-
 .../entity-title-table-row-cell.mdx           |   2 +-
 .../components/funnel-chart.mdx               |   2 +-
 src/markdown-pages/components/grid-item.mdx   |   2 +-
 src/markdown-pages/components/grid.mdx        |   2 +-
 .../components/heading-text.mdx               |   2 +-
 .../components/heatmap-component.mdx          |   2 +-
 .../components/histogram-chart.mdx            |   2 +-
 src/markdown-pages/components/icon.mdx        |   2 +-
 src/markdown-pages/components/json-chart.mdx  |   2 +-
 src/markdown-pages/components/line-chart.mdx  |   2 +-
 src/markdown-pages/components/link.mdx        |   2 +-
 src/markdown-pages/components/list-item.mdx   |   2 +-
 src/markdown-pages/components/list.mdx        |   2 +-
 .../components/metric-table-row-cell.mdx      |   2 +-
 src/markdown-pages/components/modal.mdx       |   2 +-
 .../components/nerd-graph-mutation.mdx        |   2 +-
 .../components/nerd-graph-query.mdx           |   2 +-
 .../components/nerdlet-state-context.mdx      |   2 +-
 src/markdown-pages/components/nrql-query.mdx  |   2 +-
 src/markdown-pages/components/pie-chart.mdx   |   2 +-
 .../components/platform-state-context.mdx     |   2 +-
 src/markdown-pages/components/radio-group.mdx |   2 +-
 src/markdown-pages/components/radio.mdx       |   2 +-
 .../components/scatter-chart.mdx              |   2 +-
 src/markdown-pages/components/select-item.mdx |   2 +-
 src/markdown-pages/components/select.mdx      |   2 +-
 src/markdown-pages/components/spacing.mdx     |   2 +-
 .../components/sparkline-chart.mdx            |   2 +-
 .../components/sparkline-table-row-cell.mdx   |   2 +-
 src/markdown-pages/components/spinner.mdx     |   2 +-
 src/markdown-pages/components/stack-item.mdx  |   2 +-
 src/markdown-pages/components/stack.mdx       |   2 +-
 .../components/stacked-bar-chart.mdx          |   2 +-
 src/markdown-pages/components/table-chart.mdx |   2 +-
 .../components/table-header-cell.mdx          |   2 +-
 .../components/table-header.mdx               |   2 +-
 .../components/table-row-cell.mdx             |   2 +-
 src/markdown-pages/components/table-row.mdx   |   2 +-
 src/markdown-pages/components/table.mdx       |   2 +-
 src/markdown-pages/components/tabs-item.mdx   |   2 +-
 src/markdown-pages/components/tabs.mdx        |   2 +-
 src/markdown-pages/components/text-field.mdx  |   2 +-
 src/markdown-pages/components/toast.mdx       |   2 +-
 src/markdown-pages/components/tooltip.mdx     |   2 +-
 src/markdown-pages/components/user-query.mdx  |   2 +-
 .../components/user-storage-mutation.mdx      |   2 +-
 .../components/user-storage-query.mdx         |   2 +-
 .../components/user-table-row-cell.mdx        |   2 +-
 ...ReferenceTemplate.js => ApiDocTemplate.js} |   8 +-
 ...module.scss => ApiDocTemplate.module.scss} |   0
 src/templates/ComponentDocTemplate.js         | 132 ++++++++++++++++++
 .../ComponentDocTemplate.module.scss          |  67 +++++++++
 79 files changed, 278 insertions(+), 79 deletions(-)
 rename src/templates/{ReferenceTemplate.js => ApiDocTemplate.js} (95%)
 rename src/templates/{ReferenceTemplate.module.scss => ApiDocTemplate.module.scss} (100%)
 create mode 100644 src/templates/ComponentDocTemplate.js
 create mode 100644 src/templates/ComponentDocTemplate.module.scss

diff --git a/src/markdown-pages/apis/logger.mdx b/src/markdown-pages/apis/logger.mdx
index ff8d7ef7f..def6b5c6e 100644
--- a/src/markdown-pages/apis/logger.mdx
+++ b/src/markdown-pages/apis/logger.mdx
@@ -3,5 +3,5 @@ path: '/apis/logger'
 title: 'PlatformStateContext'
 description: 'A logger component!'
 component: 'logger'
-template: 'ReferenceTemplate'
+template: 'ApiDocTemplate'
 ---
diff --git a/src/markdown-pages/apis/nerdlet.mdx b/src/markdown-pages/apis/nerdlet.mdx
index e8fbe9cdf..a87056f73 100644
--- a/src/markdown-pages/apis/nerdlet.mdx
+++ b/src/markdown-pages/apis/nerdlet.mdx
@@ -3,5 +3,5 @@ path: '/apis/nerdlet'
 title: 'Nerdlet'
 description: 'The nerdlet API'
 component: 'nerdlet'
-template: 'ReferenceTemplate'
+template: 'ApiDocTemplate'
 ---
diff --git a/src/markdown-pages/components/account-picker.mdx b/src/markdown-pages/components/account-picker.mdx
index eca4805ff..a14cd11e8 100644
--- a/src/markdown-pages/components/account-picker.mdx
+++ b/src/markdown-pages/components/account-picker.mdx
@@ -3,5 +3,5 @@ path: '/components/account-picker'
 title: 'AccountPicker'
 description: 'An AccountPicker component!'
 component: 'AccountPicker'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/account-storage-mutation.mdx b/src/markdown-pages/components/account-storage-mutation.mdx
index b6958e747..7e800646b 100644
--- a/src/markdown-pages/components/account-storage-mutation.mdx
+++ b/src/markdown-pages/components/account-storage-mutation.mdx
@@ -3,5 +3,5 @@ path: '/components/account-storage-mutation'
 title: 'AccountStorageMutation'
 description: 'An AccountStorageMutation component!'
 component: 'AccountStorageMutation'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/account-storage-query.mdx b/src/markdown-pages/components/account-storage-query.mdx
index b918ba0b7..a10482beb 100644
--- a/src/markdown-pages/components/account-storage-query.mdx
+++ b/src/markdown-pages/components/account-storage-query.mdx
@@ -3,5 +3,5 @@ path: '/components/account-storage-query'
 title: 'AccountStorageQuery'
 description: 'An AccountStorageQuery component!'
 component: 'AccountStorageQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/accounts-query.mdx b/src/markdown-pages/components/accounts-query.mdx
index 7a0ac5744..c5e7a7b80 100644
--- a/src/markdown-pages/components/accounts-query.mdx
+++ b/src/markdown-pages/components/accounts-query.mdx
@@ -3,5 +3,5 @@ path: '/components/accounts-query'
 title: 'AccountsQuery'
 description: 'A AccountsQuery component!'
 component: 'AccountsQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/area-chart.mdx b/src/markdown-pages/components/area-chart.mdx
index 7acd51425..86bb65a6d 100644
--- a/src/markdown-pages/components/area-chart.mdx
+++ b/src/markdown-pages/components/area-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/area-chart'
 title: 'AreaChart'
 description: 'An AreaChart component!'
 component: 'AreaChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/auto-sizer.mdx b/src/markdown-pages/components/auto-sizer.mdx
index e4152ddf5..151fe4dde 100644
--- a/src/markdown-pages/components/auto-sizer.mdx
+++ b/src/markdown-pages/components/auto-sizer.mdx
@@ -3,5 +3,5 @@ path: '/components/auto-sizer'
 title: 'AutoSizer'
 description: 'An AutoSizer component!'
 component: 'AutoSizer'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/bar-chart.mdx b/src/markdown-pages/components/bar-chart.mdx
index ae89681e9..591d4559d 100644
--- a/src/markdown-pages/components/bar-chart.mdx
+++ b/src/markdown-pages/components/bar-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/bar-chart'
 title: 'BarChart'
 description: 'A BarChart component!'
 component: 'BarChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/billboard-chart.mdx b/src/markdown-pages/components/billboard-chart.mdx
index 63bccbc13..fc3b13d4a 100644
--- a/src/markdown-pages/components/billboard-chart.mdx
+++ b/src/markdown-pages/components/billboard-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/billboard-chart'
 title: 'BillboardChart'
 description: 'A BillboardChart component!'
 component: 'BillboardChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/block-text.mdx b/src/markdown-pages/components/block-text.mdx
index 4f37cb5d3..3edd3e7c9 100644
--- a/src/markdown-pages/components/block-text.mdx
+++ b/src/markdown-pages/components/block-text.mdx
@@ -3,5 +3,5 @@ path: '/components/block-text'
 title: 'BlockText'
 description: 'A BlockText component!'
 component: 'BlockText'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/button.mdx b/src/markdown-pages/components/button.mdx
index 109af88ef..06d78d5c8 100644
--- a/src/markdown-pages/components/button.mdx
+++ b/src/markdown-pages/components/button.mdx
@@ -3,5 +3,5 @@ path: '/components/button'
 title: 'Button'
 description: 'A button component!'
 component: 'Button'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
\ No newline at end of file
diff --git a/src/markdown-pages/components/card-body.mdx b/src/markdown-pages/components/card-body.mdx
index ee606a264..f8bb7d985 100644
--- a/src/markdown-pages/components/card-body.mdx
+++ b/src/markdown-pages/components/card-body.mdx
@@ -3,5 +3,5 @@ path: '/components/card-body'
 title: 'CardBody'
 description: 'A CardBody component!'
 component: 'CardBody'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/card-header.mdx b/src/markdown-pages/components/card-header.mdx
index a961c2ac6..b33c21b80 100644
--- a/src/markdown-pages/components/card-header.mdx
+++ b/src/markdown-pages/components/card-header.mdx
@@ -3,5 +3,5 @@ path: '/components/card-header'
 title: 'CardHeader'
 description: 'A CardHeader component!'
 component: 'CardHeader'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/card.mdx b/src/markdown-pages/components/card.mdx
index d616164cd..b50862f46 100644
--- a/src/markdown-pages/components/card.mdx
+++ b/src/markdown-pages/components/card.mdx
@@ -3,5 +3,5 @@ path: '/components/card'
 title: 'Card'
 description: 'A Card component!'
 component: 'Card'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/chart-group.mdx b/src/markdown-pages/components/chart-group.mdx
index f8edd75b5..0b85dd0d6 100644
--- a/src/markdown-pages/components/chart-group.mdx
+++ b/src/markdown-pages/components/chart-group.mdx
@@ -3,5 +3,5 @@ path: '/components/chart-group'
 title: 'ChartGroup'
 description: 'A ChartGroup component!'
 component: 'ChartGroup'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/checkbox.mdx b/src/markdown-pages/components/checkbox.mdx
index 5f6bb505c..f2899f228 100644
--- a/src/markdown-pages/components/checkbox.mdx
+++ b/src/markdown-pages/components/checkbox.mdx
@@ -3,5 +3,5 @@ path: '/components/checkbox'
 title: 'Checkbox'
 description: 'A Checkbox component!'
 component: 'Checkbox'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/dropdown-item.mdx b/src/markdown-pages/components/dropdown-item.mdx
index 7a8a88040..93d94d98b 100644
--- a/src/markdown-pages/components/dropdown-item.mdx
+++ b/src/markdown-pages/components/dropdown-item.mdx
@@ -3,5 +3,5 @@ path: '/components/dropdown-item'
 title: 'DropdownItem'
 description: 'A DropdownItem component!'
 component: 'DropdownItem'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/dropdown.mdx b/src/markdown-pages/components/dropdown.mdx
index d94729531..6318fa6b1 100644
--- a/src/markdown-pages/components/dropdown.mdx
+++ b/src/markdown-pages/components/dropdown.mdx
@@ -3,5 +3,5 @@ path: '/components/dropdown'
 title: 'Dropdown'
 description: 'A Dropdown component!'
 component: 'Dropdown'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entities-by-domain-type-query.mdx b/src/markdown-pages/components/entities-by-domain-type-query.mdx
index 60ed9990e..1f9f3c7c2 100644
--- a/src/markdown-pages/components/entities-by-domain-type-query.mdx
+++ b/src/markdown-pages/components/entities-by-domain-type-query.mdx
@@ -3,5 +3,5 @@ path: '/components/entities-by-domain-type-query'
 title: 'EntitiesByDomainTypeQuery'
 description: 'An EntitiesByDomainTypeQuery component!'
 component: 'EntitiesByDomainTypeQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entities-by-guids-query.mdx b/src/markdown-pages/components/entities-by-guids-query.mdx
index a51baedf2..a906b7e36 100644
--- a/src/markdown-pages/components/entities-by-guids-query.mdx
+++ b/src/markdown-pages/components/entities-by-guids-query.mdx
@@ -3,5 +3,5 @@ path: '/components/entities-by-guids-query'
 title: 'EntitiesByGuidsQuery'
 description: 'An EntitiesByGuidsQuery component!'
 component: 'EntitiesByGuidsQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entities-by-name-query.mdx b/src/markdown-pages/components/entities-by-name-query.mdx
index 425317b85..2293fd1d4 100644
--- a/src/markdown-pages/components/entities-by-name-query.mdx
+++ b/src/markdown-pages/components/entities-by-name-query.mdx
@@ -3,5 +3,5 @@ path: '/components/entities-by-name-query'
 title: 'EntitiesByNameQuery'
 description: 'An EntitiesByNameQuery component!'
 component: 'EntitiesByNameQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entity-by-guid-query.mdx b/src/markdown-pages/components/entity-by-guid-query.mdx
index 74df7e824..c49830693 100644
--- a/src/markdown-pages/components/entity-by-guid-query.mdx
+++ b/src/markdown-pages/components/entity-by-guid-query.mdx
@@ -3,5 +3,5 @@ path: '/components/entity-by-guid-query'
 title: 'EntityByGuidQuery'
 description: 'An EntityByGuidQuery component!'
 component: 'EntityByGuidQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entity-count-query.mdx b/src/markdown-pages/components/entity-count-query.mdx
index efc01003b..db6e01b2c 100644
--- a/src/markdown-pages/components/entity-count-query.mdx
+++ b/src/markdown-pages/components/entity-count-query.mdx
@@ -3,5 +3,5 @@ path: '/components/entity-count-query'
 title: 'EntityCountQuery'
 description: 'An EntityCountQuery component!'
 component: 'EntityCountQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entity-search-query.mdx b/src/markdown-pages/components/entity-search-query.mdx
index 4c37d9515..59d96a4c6 100644
--- a/src/markdown-pages/components/entity-search-query.mdx
+++ b/src/markdown-pages/components/entity-search-query.mdx
@@ -3,5 +3,5 @@ path: '/components/entity-search-query'
 title: 'EntitySearchQuery'
 description: 'An EntitySearchQuery component!'
 component: 'EntitySearchQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entity-storage-mutation.mdx b/src/markdown-pages/components/entity-storage-mutation.mdx
index 0800875d8..15b240378 100644
--- a/src/markdown-pages/components/entity-storage-mutation.mdx
+++ b/src/markdown-pages/components/entity-storage-mutation.mdx
@@ -3,5 +3,5 @@ path: '/components/entity-storage-mutation'
 title: 'EntityStorageMutation'
 description: 'An EntityStorageMutation component!'
 component: 'EntityStorageMutation'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entity-storage-query.mdx b/src/markdown-pages/components/entity-storage-query.mdx
index 995627b97..36b93829a 100644
--- a/src/markdown-pages/components/entity-storage-query.mdx
+++ b/src/markdown-pages/components/entity-storage-query.mdx
@@ -3,5 +3,5 @@ path: '/components/entity-storage-query'
 title: 'EntityStorageQuery'
 description: 'An EntityStorageQuery component!'
 component: 'EntityStorageQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/entity-title-table-row-cell.mdx b/src/markdown-pages/components/entity-title-table-row-cell.mdx
index f61cb6bec..bf573701b 100644
--- a/src/markdown-pages/components/entity-title-table-row-cell.mdx
+++ b/src/markdown-pages/components/entity-title-table-row-cell.mdx
@@ -3,5 +3,5 @@ path: '/components/entity-title-table-row-cell'
 title: 'EntityTitleTableRowCell'
 description: 'An EntityTitleTableRowCell component!'
 component: 'EntityTitleTableRowCell'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/funnel-chart.mdx b/src/markdown-pages/components/funnel-chart.mdx
index 25e2c7469..dbe80d75c 100644
--- a/src/markdown-pages/components/funnel-chart.mdx
+++ b/src/markdown-pages/components/funnel-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/funnel-chart'
 title: 'FunnelChart'
 description: 'A FunnelChart component!'
 component: 'FunnelChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/grid-item.mdx b/src/markdown-pages/components/grid-item.mdx
index 868a8ef11..88641ca9f 100644
--- a/src/markdown-pages/components/grid-item.mdx
+++ b/src/markdown-pages/components/grid-item.mdx
@@ -3,5 +3,5 @@ path: '/components/grid-item'
 title: 'GridItem'
 description: 'A GridItem component!'
 component: 'GridItem'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/grid.mdx b/src/markdown-pages/components/grid.mdx
index 726d37925..f19509e9a 100644
--- a/src/markdown-pages/components/grid.mdx
+++ b/src/markdown-pages/components/grid.mdx
@@ -3,5 +3,5 @@ path: '/components/grid'
 title: 'Grid'
 description: 'A Grid component!'
 component: 'Grid'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/heading-text.mdx b/src/markdown-pages/components/heading-text.mdx
index 1ae935355..656958969 100644
--- a/src/markdown-pages/components/heading-text.mdx
+++ b/src/markdown-pages/components/heading-text.mdx
@@ -3,6 +3,6 @@ path: '/components/heading-text'
 title: 'BlockText'
 description: 'A HeadingText component!'
 component: 'HeadingText'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
 
diff --git a/src/markdown-pages/components/heatmap-component.mdx b/src/markdown-pages/components/heatmap-component.mdx
index 1e4af2884..3d82da12c 100644
--- a/src/markdown-pages/components/heatmap-component.mdx
+++ b/src/markdown-pages/components/heatmap-component.mdx
@@ -3,5 +3,5 @@ path: '/components/heatmap-chart'
 title: 'HeatmapChart'
 description: 'A HeatmapChart component!'
 component: 'HeatmapChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/histogram-chart.mdx b/src/markdown-pages/components/histogram-chart.mdx
index 38a64d878..dcf08050e 100644
--- a/src/markdown-pages/components/histogram-chart.mdx
+++ b/src/markdown-pages/components/histogram-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/histogram-chart'
 title: 'HistogramChart'
 description: 'A HistogramChart component!'
 component: 'HistogramChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/icon.mdx b/src/markdown-pages/components/icon.mdx
index e20658a14..f25451ac5 100644
--- a/src/markdown-pages/components/icon.mdx
+++ b/src/markdown-pages/components/icon.mdx
@@ -3,5 +3,5 @@ path: '/components/icon'
 title: 'Icon'
 description: 'An Icon component!'
 component: 'Icon'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/json-chart.mdx b/src/markdown-pages/components/json-chart.mdx
index fb111ac24..9186803fa 100644
--- a/src/markdown-pages/components/json-chart.mdx
+++ b/src/markdown-pages/components/json-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/json-chart'
 title: 'JsonChart'
 description: 'A JsonChart component!'
 component: 'JsonChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/line-chart.mdx b/src/markdown-pages/components/line-chart.mdx
index de5d21eb0..bbce3fecb 100644
--- a/src/markdown-pages/components/line-chart.mdx
+++ b/src/markdown-pages/components/line-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/line-chart'
 title: 'LineChart'
 description: 'A LineChart component!'
 component: 'LineChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/link.mdx b/src/markdown-pages/components/link.mdx
index 99774f778..7e16c254c 100644
--- a/src/markdown-pages/components/link.mdx
+++ b/src/markdown-pages/components/link.mdx
@@ -3,5 +3,5 @@ path: '/components/link'
 title: 'Link'
 description: 'A Link component!'
 component: 'Link'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/list-item.mdx b/src/markdown-pages/components/list-item.mdx
index d5d4bff6e..fbd6ec4ab 100644
--- a/src/markdown-pages/components/list-item.mdx
+++ b/src/markdown-pages/components/list-item.mdx
@@ -3,5 +3,5 @@ path: '/components/list-item'
 title: 'ListItem'
 description: 'A ListItem component!'
 component: 'ListItem'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/list.mdx b/src/markdown-pages/components/list.mdx
index 2189df468..1bdc1c7d2 100644
--- a/src/markdown-pages/components/list.mdx
+++ b/src/markdown-pages/components/list.mdx
@@ -3,5 +3,5 @@ path: '/components/list'
 title: 'List'
 description: 'A List component!'
 component: 'List'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/metric-table-row-cell.mdx b/src/markdown-pages/components/metric-table-row-cell.mdx
index 98004f9fd..68dfda43b 100644
--- a/src/markdown-pages/components/metric-table-row-cell.mdx
+++ b/src/markdown-pages/components/metric-table-row-cell.mdx
@@ -3,5 +3,5 @@ path: '/components/metric-table-row-cell'
 title: 'MetricTableRowCell'
 description: 'A MetricTableRowCell component!'
 component: 'MetricTableRowCell'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/modal.mdx b/src/markdown-pages/components/modal.mdx
index 3e09ef8b9..ce4bca859 100644
--- a/src/markdown-pages/components/modal.mdx
+++ b/src/markdown-pages/components/modal.mdx
@@ -3,5 +3,5 @@ path: '/components/modal'
 title: 'Modal'
 description: 'A Modal component!'
 component: 'Modal'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/nerd-graph-mutation.mdx b/src/markdown-pages/components/nerd-graph-mutation.mdx
index 5960bf7c3..d24b29fa5 100644
--- a/src/markdown-pages/components/nerd-graph-mutation.mdx
+++ b/src/markdown-pages/components/nerd-graph-mutation.mdx
@@ -3,5 +3,5 @@ path: '/components/nerd-graph-mutation'
 title: 'NerdGraphMutation'
 description: 'An NerdGraphMutation component!'
 component: 'NerdGraphMutation'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/nerd-graph-query.mdx b/src/markdown-pages/components/nerd-graph-query.mdx
index ba8a1f5c5..24896b91c 100644
--- a/src/markdown-pages/components/nerd-graph-query.mdx
+++ b/src/markdown-pages/components/nerd-graph-query.mdx
@@ -3,5 +3,5 @@ path: '/components/nerd-graph-query'
 title: 'NerdGraphQuery'
 description: 'A NerdGraphQuery component!'
 component: 'NerdGraphQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/nerdlet-state-context.mdx b/src/markdown-pages/components/nerdlet-state-context.mdx
index 3234bebee..921c256e5 100644
--- a/src/markdown-pages/components/nerdlet-state-context.mdx
+++ b/src/markdown-pages/components/nerdlet-state-context.mdx
@@ -3,5 +3,5 @@ path: '/components/nerdlet-state-context'
 title: 'NerdletStateContext'
 description: 'A NerdletStateContext component!'
 component: 'NerdletStateContext'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/nrql-query.mdx b/src/markdown-pages/components/nrql-query.mdx
index 81659bc54..8b35eed3b 100644
--- a/src/markdown-pages/components/nrql-query.mdx
+++ b/src/markdown-pages/components/nrql-query.mdx
@@ -3,5 +3,5 @@ path: '/components/nrql-query'
 title: 'NrqlQuery'
 description: 'A NrqlQuery component!'
 component: 'NrqlQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/pie-chart.mdx b/src/markdown-pages/components/pie-chart.mdx
index 8621fcbdb..fcb5833c4 100644
--- a/src/markdown-pages/components/pie-chart.mdx
+++ b/src/markdown-pages/components/pie-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/pie-chart'
 title: 'PieChart'
 description: 'A PieChart component!'
 component: 'PieChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/platform-state-context.mdx b/src/markdown-pages/components/platform-state-context.mdx
index 056b722c2..2a7b842a1 100644
--- a/src/markdown-pages/components/platform-state-context.mdx
+++ b/src/markdown-pages/components/platform-state-context.mdx
@@ -3,5 +3,5 @@ path: '/components/platform-state-context'
 title: 'PlatformStateContext'
 description: 'A PlatformStateContext component!'
 component: 'PlatformStateContext'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/radio-group.mdx b/src/markdown-pages/components/radio-group.mdx
index 796f37d8a..42031d34d 100644
--- a/src/markdown-pages/components/radio-group.mdx
+++ b/src/markdown-pages/components/radio-group.mdx
@@ -3,5 +3,5 @@ path: '/components/radio-group'
 title: 'RadioGroup'
 description: 'A RadioGroup component!'
 component: 'RadioGroup'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/radio.mdx b/src/markdown-pages/components/radio.mdx
index d20148765..0db2d51fa 100644
--- a/src/markdown-pages/components/radio.mdx
+++ b/src/markdown-pages/components/radio.mdx
@@ -3,5 +3,5 @@ path: '/components/radio'
 title: 'Radio'
 description: 'A Radio component!'
 component: 'Radio'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/scatter-chart.mdx b/src/markdown-pages/components/scatter-chart.mdx
index a8a350eec..7650fecc1 100644
--- a/src/markdown-pages/components/scatter-chart.mdx
+++ b/src/markdown-pages/components/scatter-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/scatter-chart'
 title: 'ScatterChart'
 description: 'A ScatterChart component!'
 component: 'ScatterChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/select-item.mdx b/src/markdown-pages/components/select-item.mdx
index e5c4e6601..6666be79e 100644
--- a/src/markdown-pages/components/select-item.mdx
+++ b/src/markdown-pages/components/select-item.mdx
@@ -3,5 +3,5 @@ path: '/components/select-item'
 title: 'SelectItem'
 description: 'A SelectItem component!'
 component: 'SelectItem'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/select.mdx b/src/markdown-pages/components/select.mdx
index c4349bf79..78a040c45 100644
--- a/src/markdown-pages/components/select.mdx
+++ b/src/markdown-pages/components/select.mdx
@@ -3,5 +3,5 @@ path: '/components/select'
 title: 'Select'
 description: 'A Select component!'
 component: 'Select'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/spacing.mdx b/src/markdown-pages/components/spacing.mdx
index 2de7b9183..8a6a94e6c 100644
--- a/src/markdown-pages/components/spacing.mdx
+++ b/src/markdown-pages/components/spacing.mdx
@@ -3,5 +3,5 @@ path: '/components/spacing'
 title: 'Spacing'
 description: 'A Spacing component!'
 component: 'Spacing'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/sparkline-chart.mdx b/src/markdown-pages/components/sparkline-chart.mdx
index e8ddf425c..7ef325910 100644
--- a/src/markdown-pages/components/sparkline-chart.mdx
+++ b/src/markdown-pages/components/sparkline-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/sparkline-chart'
 title: 'SparklineChart'
 description: 'A SparklineChart component!'
 component: 'SparklineChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/sparkline-table-row-cell.mdx b/src/markdown-pages/components/sparkline-table-row-cell.mdx
index d054e97b8..0b60674ce 100644
--- a/src/markdown-pages/components/sparkline-table-row-cell.mdx
+++ b/src/markdown-pages/components/sparkline-table-row-cell.mdx
@@ -3,5 +3,5 @@ path: '/components/sparkline-table-row-cell'
 title: 'SparklineTableRowCell'
 description: 'A SparklineTableRowCell component!'
 component: 'SparklineTableRowCell'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/spinner.mdx b/src/markdown-pages/components/spinner.mdx
index 88c3877f0..2235eebd9 100644
--- a/src/markdown-pages/components/spinner.mdx
+++ b/src/markdown-pages/components/spinner.mdx
@@ -3,5 +3,5 @@ path: '/components/spinner'
 title: 'Spinner'
 description: 'A Spinner component!'
 component: 'Spinner'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/stack-item.mdx b/src/markdown-pages/components/stack-item.mdx
index 3dfd6f885..f5e1358e4 100644
--- a/src/markdown-pages/components/stack-item.mdx
+++ b/src/markdown-pages/components/stack-item.mdx
@@ -3,5 +3,5 @@ path: '/components/stack-item'
 title: 'StackItem'
 description: 'A StackItem component!'
 component: 'StackItem'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/stack.mdx b/src/markdown-pages/components/stack.mdx
index 436722ad5..792f85bbb 100644
--- a/src/markdown-pages/components/stack.mdx
+++ b/src/markdown-pages/components/stack.mdx
@@ -3,5 +3,5 @@ path: '/components/stack'
 title: 'Stack'
 description: 'A Stack component!'
 component: 'Stack'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/stacked-bar-chart.mdx b/src/markdown-pages/components/stacked-bar-chart.mdx
index 199cd4a87..756778b41 100644
--- a/src/markdown-pages/components/stacked-bar-chart.mdx
+++ b/src/markdown-pages/components/stacked-bar-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/stacked-bar-chart'
 title: 'StackedBarChart'
 description: 'A StackedBarChart component!'
 component: 'StackedBarChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/table-chart.mdx b/src/markdown-pages/components/table-chart.mdx
index 35ba09b14..ebb88840e 100644
--- a/src/markdown-pages/components/table-chart.mdx
+++ b/src/markdown-pages/components/table-chart.mdx
@@ -3,5 +3,5 @@ path: '/components/table-chart'
 title: 'TableChart'
 description: 'A TableChart component!'
 component: 'TableChart'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/table-header-cell.mdx b/src/markdown-pages/components/table-header-cell.mdx
index c34cfdad2..2ed6259cb 100644
--- a/src/markdown-pages/components/table-header-cell.mdx
+++ b/src/markdown-pages/components/table-header-cell.mdx
@@ -3,5 +3,5 @@ path: '/components/table-header-cell'
 title: 'TableHeaderCell'
 description: 'A TableHeaderCell component!'
 component: 'TableHeaderCell'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/table-header.mdx b/src/markdown-pages/components/table-header.mdx
index c164a84d6..6e62f10bf 100644
--- a/src/markdown-pages/components/table-header.mdx
+++ b/src/markdown-pages/components/table-header.mdx
@@ -3,5 +3,5 @@ path: '/components/table-header'
 title: 'TableHeader'
 description: 'A TableHeader component!'
 component: 'TableHeader'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/table-row-cell.mdx b/src/markdown-pages/components/table-row-cell.mdx
index afb7c4ef7..024b64aae 100644
--- a/src/markdown-pages/components/table-row-cell.mdx
+++ b/src/markdown-pages/components/table-row-cell.mdx
@@ -3,5 +3,5 @@ path: '/components/table-row-cell'
 title: 'TableRowCell'
 description: 'A TableRowCell component!'
 component: 'TableRowCell'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/table-row.mdx b/src/markdown-pages/components/table-row.mdx
index 4660d72fd..00680840a 100644
--- a/src/markdown-pages/components/table-row.mdx
+++ b/src/markdown-pages/components/table-row.mdx
@@ -3,5 +3,5 @@ path: '/components/table-row'
 title: 'TableRow'
 description: 'A TableRow component!'
 component: 'TableRow'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/table.mdx b/src/markdown-pages/components/table.mdx
index 3a8f36c7e..aa8f35ed8 100644
--- a/src/markdown-pages/components/table.mdx
+++ b/src/markdown-pages/components/table.mdx
@@ -3,5 +3,5 @@ path: '/components/table'
 title: 'Table'
 description: 'A Table component!'
 component: 'Table'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/tabs-item.mdx b/src/markdown-pages/components/tabs-item.mdx
index 81d3884d3..9a61ae2e1 100644
--- a/src/markdown-pages/components/tabs-item.mdx
+++ b/src/markdown-pages/components/tabs-item.mdx
@@ -3,5 +3,5 @@ path: '/components/tabs-item'
 title: 'TabsItem'
 description: 'A TabsItem component!'
 component: 'TabsItem'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/tabs.mdx b/src/markdown-pages/components/tabs.mdx
index 617ff8c5f..1cac27567 100644
--- a/src/markdown-pages/components/tabs.mdx
+++ b/src/markdown-pages/components/tabs.mdx
@@ -3,5 +3,5 @@ path: '/components/tabs'
 title: 'Tabs'
 description: 'A Tabs component!'
 component: 'Tabs'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/text-field.mdx b/src/markdown-pages/components/text-field.mdx
index c6810d1d8..d86bb6cbd 100644
--- a/src/markdown-pages/components/text-field.mdx
+++ b/src/markdown-pages/components/text-field.mdx
@@ -3,5 +3,5 @@ path: '/components/text-field'
 title: 'TextField'
 description: 'A TextField component!'
 component: 'TextField'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/toast.mdx b/src/markdown-pages/components/toast.mdx
index 397f76384..2e7424bd8 100644
--- a/src/markdown-pages/components/toast.mdx
+++ b/src/markdown-pages/components/toast.mdx
@@ -3,5 +3,5 @@ path: '/components/toast'
 title: 'Toast'
 description: 'A Toast component!'
 component: 'Toast'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/tooltip.mdx b/src/markdown-pages/components/tooltip.mdx
index e63d90d47..7315e9d45 100644
--- a/src/markdown-pages/components/tooltip.mdx
+++ b/src/markdown-pages/components/tooltip.mdx
@@ -3,5 +3,5 @@ path: '/components/tooltip'
 title: 'Tooltip'
 description: 'A Tooltip component!'
 component: 'Tooltip'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/user-query.mdx b/src/markdown-pages/components/user-query.mdx
index 51ff58a2e..d585e08ed 100644
--- a/src/markdown-pages/components/user-query.mdx
+++ b/src/markdown-pages/components/user-query.mdx
@@ -3,5 +3,5 @@ path: '/components/user-query'
 title: 'UserQuery'
 description: 'An UserQuery component!'
 component: 'UserQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/user-storage-mutation.mdx b/src/markdown-pages/components/user-storage-mutation.mdx
index 202146fcb..1259a5243 100644
--- a/src/markdown-pages/components/user-storage-mutation.mdx
+++ b/src/markdown-pages/components/user-storage-mutation.mdx
@@ -3,5 +3,5 @@ path: '/components/user-storage-mutation'
 title: 'UserStorageMutation'
 description: 'A UserStorageMutation component!'
 component: 'UserStorageMutation'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/user-storage-query.mdx b/src/markdown-pages/components/user-storage-query.mdx
index 94a8cf16f..eb30a7dbc 100644
--- a/src/markdown-pages/components/user-storage-query.mdx
+++ b/src/markdown-pages/components/user-storage-query.mdx
@@ -3,5 +3,5 @@ path: '/components/user-storage-query'
 title: 'UserStorageQuery'
 description: 'A UserStorageQuery component!'
 component: 'UserStorageQuery'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/markdown-pages/components/user-table-row-cell.mdx b/src/markdown-pages/components/user-table-row-cell.mdx
index 93b50b2e0..123dd20e8 100644
--- a/src/markdown-pages/components/user-table-row-cell.mdx
+++ b/src/markdown-pages/components/user-table-row-cell.mdx
@@ -3,5 +3,5 @@ path: '/components/user-table-row-cell'
 title: 'UserTableRowCell'
 description: 'A UserTableRowCell component!'
 component: 'UserTableRowCell'
-template: 'ReferenceTemplate'
+template: 'ComponentDocTemplate'
 ---
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ApiDocTemplate.js
similarity index 95%
rename from src/templates/ReferenceTemplate.js
rename to src/templates/ApiDocTemplate.js
index 081bb1503..233ac1046 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ApiDocTemplate.js
@@ -12,7 +12,7 @@ import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 import PropList from '../components/PropList';
 import pages from '../data/sidenav.json';
-import styles from './ReferenceTemplate.module.scss';
+import styles from './ApiDocTemplate.module.scss';
 import useComponentDoc from '../hooks/useComponentDoc';
 
 const previewStyles = {
@@ -21,7 +21,7 @@ const previewStyles = {
   },
 };
 
-const ReferenceTemplate = ({ data }) => {
+const ApiDocTemplate = ({ data }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
@@ -111,7 +111,7 @@ const ReferenceTemplate = ({ data }) => {
   );
 };
 
-ReferenceTemplate.propTypes = {
+ApiDocTemplate.propTypes = {
   data: PropTypes.object,
 };
 
@@ -129,4 +129,4 @@ export const pageQuery = graphql`
   }
 `;
 
-export default ReferenceTemplate;
+export default ApiDocTemplate;
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ApiDocTemplate.module.scss
similarity index 100%
rename from src/templates/ReferenceTemplate.module.scss
rename to src/templates/ApiDocTemplate.module.scss
diff --git a/src/templates/ComponentDocTemplate.js b/src/templates/ComponentDocTemplate.js
new file mode 100644
index 000000000..68390eba4
--- /dev/null
+++ b/src/templates/ComponentDocTemplate.js
@@ -0,0 +1,132 @@
+import React, { Fragment, useState } from 'react';
+import cx from 'classnames';
+import { graphql } from 'gatsby';
+import PropTypes from 'prop-types';
+import InlineCodeSnippet from '../components/InlineCodeSnippet';
+import ReactMarkdown from 'react-markdown';
+import Container from '../components/Container';
+import ComponentExample from '../components/ComponentExample';
+import FunctionDefinition from '../components/FunctionDefinition';
+import Layout from '../components/Layout';
+import Sidebar from '../components/Sidebar';
+import SEO from '../components/Seo';
+import PropList from '../components/PropList';
+import pages from '../data/sidenav.json';
+import styles from './ComponentDocTemplate.module.scss';
+import useComponentDoc from '../hooks/useComponentDoc';
+
+const previewStyles = {
+  Spinner: {
+    height: '16px',
+  },
+};
+
+const ComponentDocTemplate = ({ data }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { mdx } = data;
+  const { frontmatter } = mdx;
+  const { title, description, component } = frontmatter;
+  const componentDoc = useComponentDoc(component);
+
+  const {
+    examples = [],
+    description: componentDescription,
+    methods = [],
+    usage = '',
+    propTypes = [],
+  } = componentDoc ?? {};
+
+  return (
+    <Layout>
+      <SEO title={title} description={description} />
+      <Container className={styles.container}>
+        <Sidebar
+          className={styles.sidebar}
+          pages={pages}
+          isOpen={isOpen}
+          toggle={() => setIsOpen(!isOpen)}
+        />
+        <main className={styles.content}>
+          <h1>{component}</h1>
+
+          <section className={cx(styles.section, styles.description)}>
+            <ReactMarkdown source={componentDescription} />
+          </section>
+
+          <section className={styles.section}>
+            <h2>Usage</h2>
+            <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
+          </section>
+
+          {examples.length > 0 && (
+            <section className={styles.section}>
+              <h2>Examples</h2>
+              <div>
+                {examples.map((example, i) => (
+                  <ComponentExample
+                    key={i}
+                    useToastManager={component === 'Toast'}
+                    className={styles.componentExample}
+                    example={example}
+                    previewStyle={previewStyles[component]}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
+
+          <section className={styles.section}>
+            <h2>Props</h2>
+            <PropList propTypes={propTypes} />
+          </section>
+
+          {methods.length > 0 && (
+            <section className={styles.section}>
+              <h2>Methods</h2>
+              {methods.map((method, i) => (
+                <Fragment key={i}>
+                  <h3 className={styles.methodName}>{method.name}</h3>
+                  <ReactMarkdown
+                    className={styles.methodDescription}
+                    source={method.description}
+                  />
+                  <FunctionDefinition
+                    params={method.params}
+                    returnValue={method.returnValue}
+                  />
+                  {method.examples.map((example, i) => (
+                    <ComponentExample
+                      key={i}
+                      className={styles.componentExample}
+                      example={example}
+                    />
+                  ))}
+                </Fragment>
+              ))}
+            </section>
+          )}
+        </main>
+      </Container>
+    </Layout>
+  );
+};
+
+ComponentDocTemplate.propTypes = {
+  data: PropTypes.object,
+};
+
+export const pageQuery = graphql`
+  query($path: String!) {
+    mdx(frontmatter: { path: { eq: $path } }) {
+      body
+      frontmatter {
+        path
+        title
+        description
+        component
+      }
+    }
+  }
+`;
+
+export default ComponentDocTemplate;
diff --git a/src/templates/ComponentDocTemplate.module.scss b/src/templates/ComponentDocTemplate.module.scss
new file mode 100644
index 000000000..2279cec8d
--- /dev/null
+++ b/src/templates/ComponentDocTemplate.module.scss
@@ -0,0 +1,67 @@
+.container {
+  display: grid;
+  grid-template-columns: auto 3fr;
+  grid-column-gap: 2rem;
+  grid-template-areas: 'sidebar main';
+
+  @media (max-width: 760px) {
+    grid-template-columns: none;
+    grid-template-areas: 'sidebar' 'main';
+  }
+}
+
+.content {
+  grid-area: main;
+}
+
+.sidebar {
+  grid-area: sidebar;
+}
+
+.componentExample:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
+.description {
+  border-top: 1px solid var(--color-neutrals-200);
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+
+  ul {
+    padding-top: 0.5rem;
+  }
+
+  li {
+    margin: 0;
+  }
+}
+
+.section:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
+.toastManager > div {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding-top: 16px;
+  padding-right: 16px;
+  pointer-events: none;
+  z-index: 200;
+  min-height: 9999px;
+}
+
+.methodDescription {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.methodName {
+  padding: 0.125rem 0.25rem;
+  display: inline;
+  color: var(--color-teal-500);
+  background: var(--color-teal-050);
+}