diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 41ae50b21..7bc45280e 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -6,8 +6,14 @@
 
 // This is needed to ensure the NR1 SDK can load properly
 const React = require('react');
+const { JS_BUNDLE } = require('./src/utils/sdk');
 
-exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
+exports.onPreRenderHTML = ({
+  getHeadComponents,
+  replaceHeadComponents,
+  getPostBodyComponents,
+  replacePostBodyComponents,
+}) => {
   replaceHeadComponents([
     ...getHeadComponents(),
     <script
@@ -36,4 +42,9 @@ exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
       src="//nr1.nr-assets.net/lib/d3/3.5.17/d3.js"
     />,
   ]);
+
+  replacePostBodyComponents([
+    ...getPostBodyComponents(),
+    <script key="nr1-sdk" crossOrigin="anonymous" src={JS_BUNDLE} />,
+  ]);
 };
diff --git a/package-lock.json b/package-lock.json
index 4beea26d5..98cd9bcd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3395,6 +3395,11 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "@types/js-cookie": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.6.tgz",
+      "integrity": "sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw=="
+    },
     "@types/json-schema": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
@@ -3798,6 +3803,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -4142,6 +4152,11 @@
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -5185,6 +5200,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "boxen": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
@@ -6332,6 +6352,16 @@
       "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
       "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
     },
+    "component-props": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/component-props/-/component-props-1.1.1.tgz",
+      "integrity": "sha1-+bffm5kntubZfJvScqqGdnDzSUQ="
+    },
+    "component-xor": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/component-xor/-/component-xor-0.0.4.tgz",
+      "integrity": "sha1-xV2DzMG5TNUImk6T+niRxyY+Wao="
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -6530,6 +6560,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "copyfiles": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.2.0.tgz",
@@ -6708,6 +6746,15 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "css-loader": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
@@ -7718,6 +7765,15 @@
         "@babel/runtime": "^7.1.2"
       }
     },
+    "dom-iterator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dom-iterator/-/dom-iterator-1.0.0.tgz",
+      "integrity": "sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==",
+      "requires": {
+        "component-props": "1.1.1",
+        "component-xor": "0.0.4"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -7963,6 +8019,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -9479,6 +9543,16 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
+    "fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "fastest-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-kSLUBtTJ2YvqZEpraFPVh0uHsCg="
+    },
     "fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -9509,6 +9583,27 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        }
+      }
+    },
     "fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -13131,6 +13226,11 @@
       "resolved": "https://registry.npmjs.org/humanize-list/-/humanize-list-1.0.1.tgz",
       "integrity": "sha1-5+cZxgpdWEjo4KXtXwqIVJbCOf0="
     },
+    "humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
+    },
     "husky": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.5.tgz",
@@ -13250,6 +13350,11 @@
         }
       }
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -13970,6 +14075,15 @@
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
+    "inline-style-prefixer": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz",
+      "integrity": "sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==",
+      "requires": {
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "inquirer": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.0.tgz",
@@ -14617,6 +14731,26 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+          "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+          "requires": {
+            "encoding": "^0.1.11",
+            "is-stream": "^1.0.1"
+          }
+        }
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -17541,6 +17675,11 @@
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
       "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -18927,6 +19066,21 @@
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
       "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
     },
+    "nano-css": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.0.tgz",
+      "integrity": "sha512-uM/9NGK9/E9/sTpbIZ/bQ9xOLOIHZwrrb/CRlbDHBU/GFS7Gshl24v/WJhwsVViWkpOXUmiZ66XO7fSB4Wd92Q==",
+      "requires": {
+        "css-tree": "^1.0.0-alpha.28",
+        "csstype": "^2.5.5",
+        "fastest-stable-stringify": "^1.0.1",
+        "inline-style-prefixer": "^4.0.0",
+        "rtl-css-js": "^1.9.0",
+        "sourcemap-codec": "^1.4.1",
+        "stacktrace-js": "^2.0.0",
+        "stylis": "3.5.0"
+      }
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -21096,6 +21250,14 @@
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -21668,6 +21830,45 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-live": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-live/-/react-live-2.2.2.tgz",
+      "integrity": "sha512-kJYAzKnPsR4oXleAX9lLsJA330BhTmSWHhr3ienZA2E/0eFDRodGl3I7sge8pp1vjc2K5Aaz73KpFUnV7Lq/DQ==",
+      "requires": {
+        "buble": "0.19.6",
+        "core-js": "^2.4.1",
+        "create-react-context": "0.2.2",
+        "dom-iterator": "^1.0.0",
+        "prism-react-renderer": "^1.0.1",
+        "prop-types": "^15.5.8",
+        "react-simple-code-editor": "^0.10.0",
+        "unescape": "^1.0.1"
+      },
+      "dependencies": {
+        "buble": {
+          "version": "0.19.6",
+          "resolved": "https://registry.npmjs.org/buble/-/buble-0.19.6.tgz",
+          "integrity": "sha512-9kViM6nJA1Q548Jrd06x0geh+BG2ru2+RMDkIHHgJY/8AcyCs34lTHwra9BX7YdPrZXd5aarkpr/SY8bmPgPdg==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "magic-string": "^0.25.1",
+            "minimist": "^1.2.0",
+            "os-homedir": "^1.0.1",
+            "regexpu-core": "^4.2.0",
+            "vlq": "^1.0.0"
+          }
+        },
+        "create-react-context": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+          "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-markdown": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.3.1.tgz",
@@ -21774,11 +21975,25 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.7.2.tgz",
       "integrity": "sha512-u5l7fhAJXecWUJzVxzMRU2Zvw8m4QmDNHlTrT5uo3KBlYBhmChd7syAakBoay1yIiVhx/8Fi7a6v6kQZfsw81Q=="
     },
+    "react-shadow": {
+      "version": "18.1.2",
+      "resolved": "https://registry.npmjs.org/react-shadow/-/react-shadow-18.1.2.tgz",
+      "integrity": "sha512-iWme1Yj7pBEHEvBHAbdWMlBmcbjqMKZ4wc8lveYtuO8BCb7zuWH3ykb3kw8JT5hUFNY4Zmi3NhsVIetKFR7tSw==",
+      "requires": {
+        "humps": "^2.0.1",
+        "react-use": "^14.2.0"
+      }
+    },
     "react-side-effect": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
       "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
     },
+    "react-simple-code-editor": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz",
+      "integrity": "sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA=="
+    },
     "react-test-renderer": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz",
@@ -21803,6 +22018,32 @@
         }
       }
     },
+    "react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw=="
+    },
+    "react-use": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-14.3.0.tgz",
+      "integrity": "sha512-Jx7Zl0k8dHA0UKpTVwYUThC5/V+Dt6JzCGiMHPNIhsxJGkiKuB1AQ7J7pNq4zj3l37ABd/RF+jRGThw0czrJXA==",
+      "requires": {
+        "@types/js-cookie": "2.2.6",
+        "@xobotyi/scrollbar-width": "1.9.5",
+        "copy-to-clipboard": "^3.2.0",
+        "fast-deep-equal": "^3.1.1",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.2.1",
+        "react-universal-interface": "^0.6.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^2.1.0",
+        "ts-easing": "^0.2.0",
+        "tslib": "^1.10.0"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -22533,6 +22774,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.16.1.tgz",
@@ -22673,6 +22919,14 @@
       "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
       "dev": true
     },
+    "rtl-css-js": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.0.tgz",
+      "integrity": "sha512-Dl5xDTeN3e7scU1cWX8c9b6/Nqz3u/HgR4gePc1kWXYiQWVQbKCEyK6+Hxve9LbcJ5EieHy1J9nJCN3grTtGwg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "run-async": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
@@ -23080,6 +23334,11 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "screenfull": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.0.2.tgz",
+      "integrity": "sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ=="
+    },
     "scroll-behavior": {
       "version": "0.9.12",
       "resolved": "https://registry.npmjs.org/scroll-behavior/-/scroll-behavior-0.9.12.tgz",
@@ -23317,6 +23576,11 @@
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
+    "set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -24063,6 +24327,14 @@
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
     },
+    "stack-generator": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz",
+      "integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==",
+      "requires": {
+        "stackframe": "^1.1.1"
+      }
+    },
     "stack-trace": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
@@ -24078,6 +24350,32 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.1.1.tgz",
       "integrity": "sha512-0PlYhdKh6AfFxRyK/v+6/k+/mMfyiEBbTM5L94D0ZytQnJ166wuwoTYLHFWGbs2dpA8Rgq763KGWmN1EQEYHRQ=="
     },
+    "stacktrace-gps": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz",
+      "integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==",
+      "requires": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.1.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI="
+        }
+      }
+    },
+    "stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "requires": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -24519,6 +24817,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.0.tgz",
+      "integrity": "sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw=="
+    },
     "subscriptions-transport-ws": {
       "version": "0.9.16",
       "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.16.tgz",
@@ -24871,6 +25174,11 @@
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+      "integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -25004,6 +25312,11 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -25065,6 +25378,11 @@
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-2.2.1.tgz",
       "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q=="
     },
+    "ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "ts-pnp": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -25147,6 +25465,11 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "ua-parser-js": {
+      "version": "0.7.21",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
+      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
+    },
     "unbzip2-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.1.tgz",
@@ -25186,6 +25509,24 @@
         "util-deprecate": "^1.0.2"
       }
     },
+    "unescape": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unescape/-/unescape-1.0.1.tgz",
+      "integrity": "sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ==",
+      "requires": {
+        "extend-shallow": "^2.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
     "unherit": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
@@ -25935,6 +26276,11 @@
         "unist-util-stringify-position": "^2.0.0"
       }
     },
+    "vlq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
+      "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
diff --git a/package.json b/package.json
index 9a6717762..dff00b0ab 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,9 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.0.0",
-    "react-markdown": "^4.3.1"
+    "react-live": "^2.2.2",
+    "react-markdown": "^4.3.1",
+    "react-shadow": "^18.1.2"
   },
   "devDependencies": {
     "@newrelic/eslint-plugin-newrelic": "^0.3.0",
diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
new file mode 100644
index 000000000..0d2c96f34
--- /dev/null
+++ b/src/components/ComponentExample.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import formatCode from '../utils/formatCode';
+import github from 'prism-react-renderer/themes/github';
+import { LiveEditor, LiveError, LiveProvider } from 'react-live';
+import styles from './ComponentExample.module.scss';
+import ComponentPreview from './ComponentPreview';
+
+const platformStateContextMock = {
+  timeRange: {
+    begin_time: null,
+    duration: 1800000,
+    end_time: null,
+  },
+};
+
+const nerdletStateContextMock = {
+  entityGuid: 'MTIzNDU2fEZPT3xCQVJ8OTg3NjU0MzIx',
+};
+
+const TRAILING_SEMI = /;\s*$/;
+
+const ComponentExample = ({
+  className,
+  example,
+  useToastManager,
+  previewStyle,
+}) => {
+  const {
+    PlatformStateContext,
+    NerdletStateContext,
+  } = window.__NR1_SDK__.default;
+  const { live } = example.options;
+  let formattedCode;
+
+  try {
+    formattedCode = formatCode(example.sourceCode).replace(TRAILING_SEMI, '');
+  } catch (e) {
+    formattedCode = example.sourceCode;
+  }
+
+  return (
+    <PlatformStateContext.Provider value={platformStateContextMock}>
+      <NerdletStateContext.Provider value={nerdletStateContextMock}>
+        <div className={className}>
+          <h3 className={styles.title}>{example.label}</h3>
+          <LiveProvider
+            scope={{
+              ...window.__NR1_SDK__.default,
+              navigation: {
+                // eslint-disable-next-line no-empty-function
+                getOpenLauncherLocation() {},
+              },
+            }}
+            code={formattedCode}
+            theme={github}
+            disabled={!live}
+          >
+            {live && (
+              <ComponentPreview
+                className={styles.preview}
+                style={previewStyle}
+                useToastManager={useToastManager}
+              />
+            )}
+            <LiveEditor style={{ fontSize: '0.75rem' }} />
+            {live && <LiveError className={styles.error} />}
+          </LiveProvider>
+        </div>
+      </NerdletStateContext.Provider>
+    </PlatformStateContext.Provider>
+  );
+};
+
+ComponentExample.propTypes = {
+  className: PropTypes.string,
+  example: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    sourceCode: PropTypes.string.isRequired,
+    options: PropTypes.object.isRequired,
+  }).isRequired,
+  useToastManager: PropTypes.bool,
+  previewStyle: PropTypes.object,
+};
+
+export default ComponentExample;
diff --git a/src/components/ComponentExample.module.scss b/src/components/ComponentExample.module.scss
new file mode 100644
index 000000000..bd97e7e85
--- /dev/null
+++ b/src/components/ComponentExample.module.scss
@@ -0,0 +1,14 @@
+.error {
+  font-size: 0.75rem;
+  color: white;
+  background: var(--color-red-400);
+  padding: 0.5rem 1rem;
+}
+
+.preview {
+  margin-bottom: 1rem;
+}
+
+.title {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/ComponentPreview.js b/src/components/ComponentPreview.js
new file mode 100644
index 000000000..ee2896050
--- /dev/null
+++ b/src/components/ComponentPreview.js
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import root from 'react-shadow';
+import { LivePreview } from 'react-live';
+import { CSS_BUNDLE } from '../utils/sdk';
+
+const EXAMPLE_CSS = `
+.nr1-ComponentExample {
+  line-height: 1.36;
+  font-weight: 400;
+  background-color: #fff;
+  color: #000e0e;
+  font-size: 12px;
+  font-family: Open Sans,Segoe UI,Tahoma,sans-serif;
+}
+
+.nr1-ComponentExample-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;
+}
+
+.nr1-Docs-prettify > * {
+  margin-right: 0.5rem;
+}
+
+.nr1-Docs-prettify > *:not(:first-child) {
+  margin-left: 0.5rem;
+}
+
+.nr1-Box,
+.nr1-RedBox,
+.nr1-Box--a,
+.nr1-Box--b,
+.nr1-Box--c {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+  height: 100%;
+}
+
+.nr1-RedBox {
+  color: red;
+  background: rgba(255, 0, 0, 0.15);
+  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
+  margin-bottom: 0.5rem;
+}
+
+[class^=nr1-Example--stack--direction],
+[class^=nr1-Example--stack--horizontal],
+[class^=nr1-Example--stack--gap],
+[class^=nr1-Example--stack--vertical] {
+  margin-bottom: 1.25rem;
+}
+
+.nr1-Example--stack--title {
+  display: block;
+  font-size: 1.5em;
+  margin-bottom: 1.25rem;
+}
+
+.nr1-Box--a {
+  min-height: 70px;
+  min-width: 70px;
+}
+
+.nr1-Box--b {
+  min-height: 90px;
+  min-width: 40px;
+}
+
+.nr1-Box--c {
+  min-height: 40px;
+  min-width: 90px;
+}
+`;
+
+const ComponentPreview = ({ className, style, useToastManager }) => {
+  const [stylesLoaded, setStylesLoaded] = useState(false);
+  const { ToastManager } = window.__NR1_SDK__;
+
+  return (
+    <root.div className={className}>
+      <link
+        rel="stylesheet"
+        href={CSS_BUNDLE}
+        onLoad={() => setStylesLoaded(true)}
+      />
+      <style type="text/css">{EXAMPLE_CSS}</style>
+      {useToastManager && (
+        <div className="nr1-ComponentExample-ToastManager">
+          <ToastManager />
+        </div>
+      )}
+      {stylesLoaded ? (
+        <LivePreview className="nr1-ComponentExample" style={style} />
+      ) : (
+        'Loading...'
+      )}
+    </root.div>
+  );
+};
+
+ComponentPreview.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  useToastManager: PropTypes.bool,
+};
+
+export default ComponentPreview;
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 5c561d391..761195d09 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -24,6 +24,17 @@
   --color-brand-800: #007e8a;
   --color-brand-900: #005054;
 
+  --color-red-050: #fcf3f3;
+  --color-red-100: #fce9e9;
+  --color-red-200: #f7c8c6;
+  --color-red-300: #ec847e;
+  --color-red-400: #e56059;
+  --color-red-500: #d8211a;
+  --color-red-600: #8e0000;
+  --color-red-700: #600;
+  --color-red-800: #390000;
+  --color-red-900: #1b0000;
+
   --boxshadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687),
     0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336),
     0px 12.5216px 10.0172px rgba(0, 85, 90, 0.03),
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index e75391729..c449a3c38 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -12,14 +12,129 @@
   {
     "displayName": "UI Components",
     "children": [
+      {
+        "displayName": "Text Components",
+        "children": [
+          {
+            "displayName": "BlockText",
+            "url": "/components/block-text"
+          },
+          {
+            "displayName": "HeadingText",
+            "url": "/components/heading-text"
+          },
+          {
+            "displayName": "Link",
+            "url": "/components/link"
+          }
+        ]
+      },
+      {
+        "displayName": "Layout Components",
+        "children": [
+          {
+            "displayName": "Card",
+            "url": "/components/card"
+          },
+          {
+            "displayName": "CardBody",
+            "url": "/components/card-body"
+          },
+          {
+            "displayName": "CardHeader",
+            "url": "/components/card-header"
+          },
+          {
+            "displayName": "Grid",
+            "url": "/components/grid"
+          },
+          {
+            "displayName": "Stack",
+            "url": "/components/stack"
+          }
+        ]
+      },
       {
         "displayName": "Form Components",
         "children": [
+          {
+            "displayName": "AccountPicker",
+            "url": "/components/account-picker"
+          },
           {
             "displayName": "Button",
             "url": "/components/button"
           }
         ]
+      },
+      {
+        "displayName": "Feedback Components",
+        "children": [
+          {
+            "displayName": "Icon",
+            "url": "/components/icon"
+          },
+          {
+            "displayName": "Spinner",
+            "url": "/components/spinner"
+          },
+          {
+            "displayName": "Toast",
+            "url": "/components/toast"
+          }
+        ]
+      },
+      {
+        "displayName": "Overlaid Components",
+        "children": [
+          {
+            "displayName": "Modal",
+            "url": "/components/modal"
+          },
+          {
+            "displayName": "Tooltip",
+            "url": "/components/tooltip"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "displayName": "Charts",
+    "children": [
+      {
+        "displayName": "AreaChart",
+        "url": "/components/area-chart"
+      }
+    ]
+  },
+  {
+    "displayName": "Query and storage",
+    "children": [
+      {
+        "displayName": "AccountStorageMutation",
+        "url": "/components/account-storage-mutation"
+      },
+      {
+        "displayName": "NerdGraphQuery",
+        "url": "/components/nerd-graph-query"
+      },
+      {
+        "displayName": "NrqlQuery",
+        "url": "/components/nrql-query"
+      }
+    ]
+  },
+  {
+    "displayName": "Platform APIs",
+    "children": [
+      {
+        "displayName": "NerdletStateContext",
+        "url": "/components/nerdlet-state-context"
+      },
+      {
+        "displayName": "PlatformStateContext",
+        "url": "/components/platform-state-context"
       }
     ]
   }
diff --git a/src/hooks/useSdk.js b/src/hooks/useSdk.js
deleted file mode 100644
index 389b15304..000000000
--- a/src/hooks/useSdk.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import useScript from './useScript';
-import useStylesheet from './useStylesheet';
-import { JS_BUNDLE, CSS_BUNDLE } from '../utils/sdk';
-
-const useSdk = () => {
-  const scriptLoaded = useScript(JS_BUNDLE);
-  const stylesheetLoaded = useStylesheet(CSS_BUNDLE);
-
-  return scriptLoaded && stylesheetLoaded;
-};
-
-export default useSdk;
diff --git a/src/markdown-pages/components/account-picker.mdx b/src/markdown-pages/components/account-picker.mdx
new file mode 100644
index 000000000..eca4805ff
--- /dev/null
+++ b/src/markdown-pages/components/account-picker.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/account-picker'
+title: 'AccountPicker'
+description: 'An AccountPicker component!'
+component: 'AccountPicker'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/account-storage-mutation.mdx b/src/markdown-pages/components/account-storage-mutation.mdx
new file mode 100644
index 000000000..b6958e747
--- /dev/null
+++ b/src/markdown-pages/components/account-storage-mutation.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/account-storage-mutation'
+title: 'AccountStorageMutation'
+description: 'An AccountStorageMutation component!'
+component: 'AccountStorageMutation'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/area-chart.mdx b/src/markdown-pages/components/area-chart.mdx
new file mode 100644
index 000000000..7acd51425
--- /dev/null
+++ b/src/markdown-pages/components/area-chart.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/area-chart'
+title: 'AreaChart'
+description: 'An AreaChart component!'
+component: 'AreaChart'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/block-text.mdx b/src/markdown-pages/components/block-text.mdx
new file mode 100644
index 000000000..4f37cb5d3
--- /dev/null
+++ b/src/markdown-pages/components/block-text.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/block-text'
+title: 'BlockText'
+description: 'A BlockText component!'
+component: 'BlockText'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/button.mdx b/src/markdown-pages/components/button.mdx
index 339be2e64..df41b6abe 100644
--- a/src/markdown-pages/components/button.mdx
+++ b/src/markdown-pages/components/button.mdx
@@ -5,4 +5,3 @@ description: 'A button component!'
 component: 'Button'
 template: 'ReferenceTemplate'
 ---
-
diff --git a/src/markdown-pages/components/card-body.mdx b/src/markdown-pages/components/card-body.mdx
new file mode 100644
index 000000000..ee606a264
--- /dev/null
+++ b/src/markdown-pages/components/card-body.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/card-body'
+title: 'CardBody'
+description: 'A CardBody component!'
+component: 'CardBody'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/card-header.mdx b/src/markdown-pages/components/card-header.mdx
new file mode 100644
index 000000000..a961c2ac6
--- /dev/null
+++ b/src/markdown-pages/components/card-header.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/card-header'
+title: 'CardHeader'
+description: 'A CardHeader component!'
+component: 'CardHeader'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/card.mdx b/src/markdown-pages/components/card.mdx
new file mode 100644
index 000000000..d616164cd
--- /dev/null
+++ b/src/markdown-pages/components/card.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/card'
+title: 'Card'
+description: 'A Card component!'
+component: 'Card'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/grid.mdx b/src/markdown-pages/components/grid.mdx
new file mode 100644
index 000000000..726d37925
--- /dev/null
+++ b/src/markdown-pages/components/grid.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/grid'
+title: 'Grid'
+description: 'A Grid component!'
+component: 'Grid'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/heading-text.mdx b/src/markdown-pages/components/heading-text.mdx
new file mode 100644
index 000000000..1ae935355
--- /dev/null
+++ b/src/markdown-pages/components/heading-text.mdx
@@ -0,0 +1,8 @@
+---
+path: '/components/heading-text'
+title: 'BlockText'
+description: 'A HeadingText component!'
+component: 'HeadingText'
+template: 'ReferenceTemplate'
+---
+
diff --git a/src/markdown-pages/components/icon.mdx b/src/markdown-pages/components/icon.mdx
new file mode 100644
index 000000000..e20658a14
--- /dev/null
+++ b/src/markdown-pages/components/icon.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/icon'
+title: 'Icon'
+description: 'An Icon component!'
+component: 'Icon'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/link.mdx b/src/markdown-pages/components/link.mdx
new file mode 100644
index 000000000..99774f778
--- /dev/null
+++ b/src/markdown-pages/components/link.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/link'
+title: 'Link'
+description: 'A Link component!'
+component: 'Link'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/modal.mdx b/src/markdown-pages/components/modal.mdx
new file mode 100644
index 000000000..3e09ef8b9
--- /dev/null
+++ b/src/markdown-pages/components/modal.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/modal'
+title: 'Modal'
+description: 'A Modal component!'
+component: 'Modal'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/nerd-graph-query.mdx b/src/markdown-pages/components/nerd-graph-query.mdx
new file mode 100644
index 000000000..ba8a1f5c5
--- /dev/null
+++ b/src/markdown-pages/components/nerd-graph-query.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/nerd-graph-query'
+title: 'NerdGraphQuery'
+description: 'A NerdGraphQuery component!'
+component: 'NerdGraphQuery'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/nerdlet-state-context.mdx b/src/markdown-pages/components/nerdlet-state-context.mdx
new file mode 100644
index 000000000..3234bebee
--- /dev/null
+++ b/src/markdown-pages/components/nerdlet-state-context.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/nerdlet-state-context'
+title: 'NerdletStateContext'
+description: 'A NerdletStateContext component!'
+component: 'NerdletStateContext'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/nrql-query.mdx b/src/markdown-pages/components/nrql-query.mdx
new file mode 100644
index 000000000..81659bc54
--- /dev/null
+++ b/src/markdown-pages/components/nrql-query.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/nrql-query'
+title: 'NrqlQuery'
+description: 'A NrqlQuery component!'
+component: 'NrqlQuery'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/platform-state-context.mdx b/src/markdown-pages/components/platform-state-context.mdx
new file mode 100644
index 000000000..056b722c2
--- /dev/null
+++ b/src/markdown-pages/components/platform-state-context.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/platform-state-context'
+title: 'PlatformStateContext'
+description: 'A PlatformStateContext component!'
+component: 'PlatformStateContext'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/spinner.mdx b/src/markdown-pages/components/spinner.mdx
new file mode 100644
index 000000000..88c3877f0
--- /dev/null
+++ b/src/markdown-pages/components/spinner.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/spinner'
+title: 'Spinner'
+description: 'A Spinner component!'
+component: 'Spinner'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/stack.mdx b/src/markdown-pages/components/stack.mdx
new file mode 100644
index 000000000..436722ad5
--- /dev/null
+++ b/src/markdown-pages/components/stack.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/stack'
+title: 'Stack'
+description: 'A Stack component!'
+component: 'Stack'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/toast.mdx b/src/markdown-pages/components/toast.mdx
new file mode 100644
index 000000000..397f76384
--- /dev/null
+++ b/src/markdown-pages/components/toast.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/toast'
+title: 'Toast'
+description: 'A Toast component!'
+component: 'Toast'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/tooltip.mdx b/src/markdown-pages/components/tooltip.mdx
new file mode 100644
index 000000000..e63d90d47
--- /dev/null
+++ b/src/markdown-pages/components/tooltip.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/tooltip'
+title: 'Tooltip'
+description: 'A Tooltip component!'
+component: 'Tooltip'
+template: 'ReferenceTemplate'
+---
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index 16c5c4dcb..a7d723661 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -1,19 +1,25 @@
 import React, { useState } from 'react';
+import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
 import Container from '../components/Container';
+import ComponentExample from '../components/ComponentExample';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
-import useSdk from '../hooks/useSdk';
 
 import pages from '../data/sidenav.json';
 
 import styles from './ReferenceTemplate.module.scss';
 
+const previewStyles = {
+  Spinner: {
+    height: '16px',
+  },
+};
+
 const ReferenceTemplate = ({ data }) => {
-  const loaded = useSdk();
   const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
@@ -21,6 +27,7 @@ const ReferenceTemplate = ({ data }) => {
 
   if (typeof window === 'undefined') global.window = {};
   const componentData = window?.__NR1_SDK__?.default?.[component];
+  const examples = componentData?.__docs__.tags.examples || [];
 
   return (
     <Layout>
@@ -32,19 +39,33 @@ const ReferenceTemplate = ({ data }) => {
           isOpen={isOpen}
           toggle={() => setIsOpen(!isOpen)}
         />
-        {loaded ? (
-          <main className={styles.content}>
-            <h1>{component}</h1>
+        <main className={styles.content}>
+          <h1>{component}</h1>
 
-            {componentData && componentData.__docs__ && (
-              <div className={styles.description}>
+          {componentData && componentData.__docs__ && (
+            <>
+              <section className={cx(styles.section, styles.description)}>
                 <ReactMarkdown source={componentData.__docs__.text} />
-              </div>
-            )}
-          </main>
-        ) : (
-          <p>Loading...</p>
-        )}
+              </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>
+              )}
+            </>
+          )}
+        </main>
       </Container>
     </Layout>
   );
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
index 9c9cfddfb..1e21bd266 100644
--- a/src/templates/ReferenceTemplate.module.scss
+++ b/src/templates/ReferenceTemplate.module.scss
@@ -18,6 +18,10 @@
   grid-area: sidebar;
 }
 
+.componentExample:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
 .description {
   border-top: 1px solid var(--color-neutrals-200);
   margin-top: 0.5rem;
@@ -31,3 +35,21 @@
     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;
+}
diff --git a/src/utils/formatCode.js b/src/utils/formatCode.js
new file mode 100644
index 000000000..90426275e
--- /dev/null
+++ b/src/utils/formatCode.js
@@ -0,0 +1,15 @@
+import prettier from 'prettier/standalone';
+import parserBabel from 'prettier/parser-babel';
+
+const formatCode = (code, formatOptions = {}) =>
+  prettier.format(code, {
+    trailingComma: 'es5',
+    printWidth: 80,
+    tabWidth: 2,
+    semi: true,
+    singleQuote: true,
+    ...formatOptions,
+    plugins: [parserBabel],
+  });
+
+export default formatCode;