diff --git a/docs/markdown.js b/docs/markdown.js
index d9a31c70..3761fac7 100644
--- a/docs/markdown.js
+++ b/docs/markdown.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import {Heading, Link} from '@primer/components'
-import {CodeExample} from '@primer/blueprints/dist/next-components.umd.js'
+import {CodeExample} from '@primer/blueprints/dist/next-components-index.umd.js'
 import Outline from './Outline'
 
 export const H1 = props => <Heading fontSize={6} fontWeight="light" {...props} />
 
+
 export default function getComponents(page = {}) {
   const {outline: getOutline = () => []} = page
 
@@ -13,7 +14,7 @@ export default function getComponents(page = {}) {
     // render links with our component
     a: Link,
     // render code blocks with our wrapper around react-live
-    code: CodeExample,
+    code: (props) => <CodeExample {...props}/>,
     // render the outline for <p> tags with exactly the text "{:toc}"
     p: ({children, ...rest}) => {
       if (children === '{:toc}') {
diff --git a/package-lock.json b/package-lock.json
index 961c189a..27529e32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1366,16 +1366,18 @@
       }
     },
     "@primer/blueprints": {
-      "version": "0.0.0-d6c952f",
-      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-0.0.0-d6c952f.tgz",
-      "integrity": "sha512-hwIo2x+iSFgOJaTX4ie1KI8vvfYFjW0m7E/BgW3zTWilPhl9gDdzFFK87gcu0ghivT1IXJAZE9YZvs40M5O96Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-4.0.0.tgz",
+      "integrity": "sha512-0sZVXb7c+tT+mjtNNdqzY5jDxsO81kk3kGCn2njM3UvCT3qBJ/6Ytbc8z2i6JK/5i/V8J/3VRCACxZXpy83XXg==",
       "dev": true,
       "requires": {
         "@githubprimer/octicons-react": "^8.1.3",
-        "@primer/components": "12.0.2",
+        "@primer/components": "12.0.1",
         "@primer/next-pages": "0.0.3",
         "downshift": "3.2.7",
+        "html-2-jsx": "^0.5.1-dev",
         "lunr": "2.3.6",
+        "next": "7.0.2",
         "prism-github": "^1.1.0",
         "prop-types": "^15.6.2",
         "react-live": "2.0.0",
@@ -1385,47 +1387,6 @@
         "val-loader": "1.1.1"
       },
       "dependencies": {
-        "@primer/components": {
-          "version": "12.0.2",
-          "resolved": "https://registry.npmjs.org/@primer/components/-/components-12.0.2.tgz",
-          "integrity": "sha512-vgkJusHjiaO8Z8JEbKa3Wt30Aq1AlWDKPfeMaLuy773LkGC7i5pZVFYMp7zkO1RzG/5CgNw9+xobG9WkWj+puw==",
-          "dev": true,
-          "requires": {
-            "@githubprimer/octicons-react": "8.1.2",
-            "babel-plugin-macros": "2.4.2",
-            "classnames": "^2.2.5",
-            "d3-shape": "^1.2.0",
-            "nanoid": "2.0.0",
-            "primer-colors": "1.0.1",
-            "primer-markdown": "3.7.9",
-            "primer-typography": "1.0.1",
-            "react": "^16.8.0",
-            "react-bodymovin": "2.0.0",
-            "react-dom": "^16.8.1",
-            "styled-system": "3.1.3",
-            "system-components": "3.0.1"
-          },
-          "dependencies": {
-            "@githubprimer/octicons-react": {
-              "version": "8.1.2",
-              "resolved": "https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.2.tgz",
-              "integrity": "sha512-HMggynDdrNxlIm4B8V8e883+3Fwe1wXvvN+X57/ZDpkRv92bhsoK+4s3grbEpTtpzbYlAD/0X40IpUkZlZH4EQ==",
-              "dev": true,
-              "requires": {
-                "prop-types": "^15.6.1"
-              }
-            },
-            "styled-system": {
-              "version": "3.1.3",
-              "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-3.1.3.tgz",
-              "integrity": "sha512-ohDTJPC/MXJMUgfT0qE9syoTOmFculOkW30+AZDn+hbMGRg07V49MNMl5sA0Vi8gFEz6Xluoomvn5xZpaqRDyQ==",
-              "dev": true,
-              "requires": {
-                "prop-types": "^15.6.2"
-              }
-            }
-          }
-        },
         "core-js": {
           "version": "2.6.5",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
diff --git a/package.json b/package.json
index 3c5ca704..2fcad0ed 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@githubprimer/octicons-react": "^8.1.3",
     "@mdx-js/mdx": "^0.16.6",
     "@mdx-js/tag": "0.15.0",
-    "@primer/blueprints": "0.0.0-d6c952f",
+    "@primer/blueprints": "4.0.0",
     "@primer/components": "12.0.1",
     "@primer/next-pages": "0.0.3",
     "@storybook/addon-viewport": "5.0.0",
diff --git a/pages/_app.js b/pages/_app.js
index 38bb28ae..a1436d52 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -5,7 +5,7 @@ import Head from 'next/head'
 import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components'
 import {PackageHeader} from '../docs/components'
 import {Header, JumpNav, Section, Router, RouteMatch, SectionLink, SideNav} from '@primer/blueprints'
-import {NavList} from '@primer/blueprints/dist/next-components.umd.js'
+import {NavList} from '@primer/blueprints/dist/next-components-index.umd.js'
 import getComponents from '../docs/markdown'
 import documents from '../searchIndex'
 import {config, requirePage, rootPage} from '../docs/utils'
diff --git a/pages/_error.js b/pages/_error.js
index 7d3332d0..3d864035 100644
--- a/pages/_error.js
+++ b/pages/_error.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import {Heading} from '@primer/components'
-import {redirectTrailingSlash} from '@primer/blueprints/dist/next-components.umd.js'
+import {redirectTrailingSlash} from '@primer/blueprints/dist/next-components-index.umd.js'
 
 export default class extends React.Component {
   static getInitialProps(context) {
diff --git a/pages/index.js b/pages/index.js
index 6c80fc5c..274ac8fe 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,2 +1,2 @@
-import {redirect} from '@primer/blueprints/dist/next-components.umd.js'
+import {redirect} from '@primer/blueprints/dist/next-components-index.umd.js'
 export default redirect('/css')