diff --git a/.changeset/4efba9dc/changes.json b/.changeset/4efba9dc/changes.json
new file mode 100644
index 00000000..5b461d1a
--- /dev/null
+++ b/.changeset/4efba9dc/changes.json
@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@brisk-docs/website", "type": "minor" }],
+  "dependents": []
+}
diff --git a/.changeset/4efba9dc/changes.md b/.changeset/4efba9dc/changes.md
new file mode 100644
index 00000000..6f980e61
--- /dev/null
+++ b/.changeset/4efba9dc/changes.md
@@ -0,0 +1 @@
+- Remove support for using JSX without importing React in the website.
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index 7fee289b..26d32769 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,31 +1,41 @@
 {
-    "parser": "babel-eslint",
-    "extends": [
-        "airbnb",
-        "prettier",
-        "prettier/flowtype",
-        "prettier/react",
-        "plugin:jest/recommended"
+  "parser": "babel-eslint",
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/flowtype",
+    "prettier/react",
+    "plugin:jest/recommended"
+  ],
+  "plugins": ["emotion"],
+  "rules": {
+    "emotion/jsx-import": "error",
+    "react/jsx-filename-extension": "off",
+    "react/require-default-props": "off",
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["invalidHref", "preferButton"]
+      }
     ],
-    "plugins": ["emotion"],
-    "rules": {
-        "emotion/jsx-import": "error",
-        "react/jsx-filename-extension": "off",
-        "react/react-in-jsx-scope": "off",
-        "react/require-default-props": "off",
-        "jsx-a11y/anchor-is-valid": "off",
-        "import/extensions": ["error", "never", { "css": "ignorePackages", "json": "always" }],
-        "react/sort-comp": "off"
+    "import/extensions": [
+      "error",
+      "never",
+      { "css": "ignorePackages", "json": "always" }
+    ],
+    "react/sort-comp": "off"
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
     },
-    "settings": {
-        "import/parsers": {
-            "@typescript-eslint/parser": [".ts", ".tsx"]
-        },
-        "import/resolver": {
-            // use <root>/path/to/folder/tsconfig.json
-            "typescript": {
-                "directory": "./packages/react-changelogs/tsconfig.json"
-            }
-        }
+    "import/resolver": {
+      // use <root>/path/to/folder/tsconfig.json
+      "typescript": {
+        "directory": "./packages/react-changelogs/tsconfig.json"
+      }
     }
+  }
 }
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example1.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example1.js
index 65120698..fb7b2b35 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example1.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 page';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example2.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example2.js
index 6c2061e1..c5b05053 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example2.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 page';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example3.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example3.js
index 6a8184cb..18a3210b 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example3.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 page';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/src/index.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/src/index.js
index d280fb8f..8c2d6d0d 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/src/index.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 1';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example1.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example1.js
index c174d315..6fbcb23b 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example1.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 package 2';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example2.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example2.js
index a1b5bcd1..da0e7062 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example2.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 package 2';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example3.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example3.js
index 9618444d..b61292a8 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example3.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 package 2';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/src/index.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/src/index.js
index 1fcafeb7..e7e53039 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/src/index.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 2';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example1.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example1.js
index a2f10d45..3a4eae7d 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example1.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 package3';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example2.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example2.js
index 25def259..edd1689a 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example2.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 package3';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example3.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example3.js
index 3d3034f6..5e517cc1 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example3.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 package3';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/src/index.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/src/index.js
index d280fb8f..8c2d6d0d 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/src/index.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 1';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/babel.config.js b/packages/website/babel.config.js
index 73ca8610..20cb8805 100644
--- a/packages/website/babel.config.js
+++ b/packages/website/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['next/babel', '@babel/typescript'],
+  presets: ['@babel/env', '@babel/preset-react', '@babel/preset-typescript'],
   plugins: [
     'emotion',
     [
@@ -13,5 +13,6 @@ module.exports = {
     'transform-flow-strip-types',
     '@babel/proposal-class-properties',
     '@babel/proposal-object-rest-spread',
+    '@babel/transform-runtime',
   ],
 };
diff --git a/packages/website/bin/page-generator/templates/index.js b/packages/website/bin/page-generator/templates/index.js
index edd4084a..93c5a863 100644
--- a/packages/website/bin/page-generator/templates/index.js
+++ b/packages/website/bin/page-generator/templates/index.js
@@ -17,6 +17,7 @@ const basicPageTemplate = (
 ) => {
   if (!componentPath) {
     return outdent`
+      import React from 'react';
       import Wrapper from '${wrapperPath}';
       import PageTitle from '${pageTitlePath}'
 
@@ -30,6 +31,7 @@ const basicPageTemplate = (
   }
 
   return outdent`
+    import React from 'react';
     import Component from '${componentPath}';
     import Wrapper from '${wrapperPath}';
     import PageTitle from '${pageTitlePath}'
@@ -51,6 +53,7 @@ const exampleTemplate = (
   data = {},
   title = '',
 ) => outdent`
+    import React from 'react';
     import Component from '${componentPath}';
     import fileContents from '!!raw-loader!${componentPath}';
 
@@ -68,6 +71,7 @@ const exampleTemplate = (
 `;
 
 const rawTemplate = componentPath => outdent`
+import React from 'react';
 import Component from '${componentPath}'
 
 export default () => <Component />
@@ -79,6 +83,7 @@ const basicNonComponentTemplate = (
   type,
   title = '',
 ) => outdent`
+    import React from 'react';
     import Wrapper from '${wrapperPath}';
     import PageTitle from '${pageTitlePath}'
 
diff --git a/packages/website/bin/page-generator/templates/test.js b/packages/website/bin/page-generator/templates/test.js
new file mode 100644
index 00000000..6946a2db
--- /dev/null
+++ b/packages/website/bin/page-generator/templates/test.js
@@ -0,0 +1,107 @@
+import { createTempDir } from 'jest-fixtures';
+import path from 'path';
+import fse from 'fs-extra';
+
+import * as generators from './index';
+
+const assertImportsReact = source => {
+  expect(source).toMatch(/^import React from 'react';$/m);
+};
+
+describe('Page generators', () => {
+  let cwd;
+  let pagesPath;
+  let wrappersPath;
+
+  const getOutput = filename => {
+    const outputPath = path.join(pagesPath, filename);
+    return fse.readFileSync(outputPath, { encoding: 'utf-8' });
+  };
+
+  beforeEach(async () => {
+    cwd = await createTempDir();
+    pagesPath = path.join(cwd, 'pages');
+    wrappersPath = path.join(cwd, 'wrappers');
+  });
+
+  it('creates js for a package home page', () => {
+    generators.generateHomePage(
+      'output.js',
+      path.join(cwd, 'README.md'),
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+
+  it('creates js for a package doc page', () => {
+    generators.generatePackageDocPage(
+      'output.js',
+      path.join(cwd, 'README.md'),
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+
+  it('creates js for a package example pages', () => {
+    generators.generateExamplePage(
+      'output.js',
+      'output-raw.js',
+      path.join(cwd, 'example.js'),
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    const outputRaw = getOutput('output-raw.js');
+
+    assertImportsReact(output);
+
+    assertImportsReact(outputRaw);
+  });
+
+  it('creates js for a docs home page', () => {
+    generators.generateDocsHomePage(
+      'output.js',
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+
+  it('creates js for an examples home page', () => {
+    generators.generateExamplesHomePage(
+      'output.js',
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+
+  it('creates js for project doc page', () => {
+    generators.generateProjectDocPage(
+      'output.js',
+      path.join(cwd, 'README.md'),
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+});
diff --git a/packages/website/components/link-button.js b/packages/website/components/link-button.js
index 5ffb895e..85ab5f8f 100644
--- a/packages/website/components/link-button.js
+++ b/packages/website/components/link-button.js
@@ -6,6 +6,7 @@ Passes all props other than component directly into `@atlaskit/button`.
 See the [@atlaskit/button](https://atlaskit.atlassian.com/packages/core/button) docs for
 the options available to you.
 */
+import React from 'react';
 
 import Button from '@atlaskit/button';
 import Link from 'next/link';
diff --git a/packages/website/components/mdx/index.js b/packages/website/components/mdx/index.js
index b37924b7..e97b9850 100644
--- a/packages/website/components/mdx/index.js
+++ b/packages/website/components/mdx/index.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Heading from './Heading';
 import Link from '../switch-link';
 
diff --git a/packages/website/components/navigation-wrapper.js b/packages/website/components/navigation-wrapper.js
index 5799af64..4de3a838 100644
--- a/packages/website/components/navigation-wrapper.js
+++ b/packages/website/components/navigation-wrapper.js
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DocumentsIcon from '@atlaskit/icon/glyph/documents';
 import SearchIcon from '@atlaskit/icon/glyph/search';
diff --git a/packages/website/components/navigation/all-packages-nav-content.js b/packages/website/components/navigation/all-packages-nav-content.js
index b915b46c..fe4d7659 100644
--- a/packages/website/components/navigation/all-packages-nav-content.js
+++ b/packages/website/components/navigation/all-packages-nav-content.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   ContainerHeader,
   HeaderSection,
@@ -9,9 +10,6 @@ import {
 } from '@atlaskit/navigation-next';
 import { gridSize as gridSizeFn } from '@atlaskit/theme';
 
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-
 import * as PropTypes from 'prop-types';
 import titleCase from 'title-case';
 import LinkWithRouter from './link-with-router';
@@ -24,6 +22,10 @@ const AllPackagesNavContent = ({ data }) => (
     <HeaderSection>
       {({ css }) => (
         <div
+          // This works because navigation-next is importing
+          // an old version of emotion. It also prevents us from
+          // using the jsx import from @emotion/core
+          // eslint-disable-next-line emotion/jsx-import
           css={{
             ...css,
             paddingTop: `${gridSize * 2.5}px`,
diff --git a/packages/website/components/navigation/docs-nav-content.js b/packages/website/components/navigation/docs-nav-content.js
index 397d43e5..21fdd3eb 100644
--- a/packages/website/components/navigation/docs-nav-content.js
+++ b/packages/website/components/navigation/docs-nav-content.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   BackItem,
   MenuSection,
diff --git a/packages/website/components/navigation/link-component.js b/packages/website/components/navigation/link-component.js
index 642965b9..8339ef21 100644
--- a/packages/website/components/navigation/link-component.js
+++ b/packages/website/components/navigation/link-component.js
@@ -1,6 +1,6 @@
 // Component that can be used as the component prop in nav items
 
-import { Component } from 'react';
+import React, { Component } from 'react';
 import Link from 'next/link';
 import * as PropTypes from 'prop-types';
 
diff --git a/packages/website/components/navigation/link-with-router.js b/packages/website/components/navigation/link-with-router.js
index 6f2521c4..7d7570a7 100644
--- a/packages/website/components/navigation/link-with-router.js
+++ b/packages/website/components/navigation/link-with-router.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 import { withRouter } from 'next/router';
 import { Item } from '@atlaskit/navigation-next';
diff --git a/packages/website/components/navigation/package-nav-content.js b/packages/website/components/navigation/package-nav-content.js
index 54cecdea..b685e50a 100644
--- a/packages/website/components/navigation/package-nav-content.js
+++ b/packages/website/components/navigation/package-nav-content.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   MenuSection,
   BackItem,
diff --git a/packages/website/components/navigation/search-drawer.js b/packages/website/components/navigation/search-drawer.js
index ae4c4ee7..d5c20b47 100644
--- a/packages/website/components/navigation/search-drawer.js
+++ b/packages/website/components/navigation/search-drawer.js
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
   QuickSearch,
diff --git a/packages/website/components/package-metadata.js b/packages/website/components/package-metadata.js
index 44a9ed26..8d9acc0e 100644
--- a/packages/website/components/package-metadata.js
+++ b/packages/website/components/package-metadata.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import GitUrlParse from 'git-url-parse';
@@ -88,7 +89,6 @@ const PackageMetaData = ({ id, version, maintainers, repository }) => (
           <p style={{ margin: '0' }}>{maintainers.join(', ')}</p>
         </MetaDataEntry>
       )}
-
       <RepositoryLink repository={repository} />
     </MetaDataWrapper>
   </div>
diff --git a/packages/website/components/package-metadata.test.js b/packages/website/components/package-metadata.test.js
index 0e94abd1..3e7c225f 100644
--- a/packages/website/components/package-metadata.test.js
+++ b/packages/website/components/package-metadata.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { mount } from 'enzyme';
 import PackageMetaData, { MetaDataEntry } from './package-metadata';
 
diff --git a/packages/website/components/page-templates/item-list.js b/packages/website/components/page-templates/item-list.js
index 2bed4d09..7b5d7bb2 100644
--- a/packages/website/components/page-templates/item-list.js
+++ b/packages/website/components/page-templates/item-list.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 import Table from '@atlaskit/dynamic-table';
 import styled from '@emotion/styled';
diff --git a/packages/website/components/page-templates/package-docs.js b/packages/website/components/page-templates/package-docs.js
index c366cd97..58661852 100644
--- a/packages/website/components/page-templates/package-docs.js
+++ b/packages/website/components/page-templates/package-docs.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 
 import PackageNavContent from '../navigation/package-nav-content';
diff --git a/packages/website/components/page-templates/package-home.js b/packages/website/components/page-templates/package-home.js
index a40f34d7..c7ffefc6 100644
--- a/packages/website/components/page-templates/package-home.js
+++ b/packages/website/components/page-templates/package-home.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { colors } from '@atlaskit/theme';
diff --git a/packages/website/components/page-templates/package-home.test.js b/packages/website/components/page-templates/package-home.test.js
index 8ce9a29a..133ab261 100644
--- a/packages/website/components/page-templates/package-home.test.js
+++ b/packages/website/components/page-templates/package-home.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { shallow, mount } from 'enzyme';
 import titleCase from 'title-case';
 import PackageHomeWrapper, { Description } from './package-home';
diff --git a/packages/website/components/page-templates/project-docs.js b/packages/website/components/page-templates/project-docs.js
index 13397762..8be62843 100644
--- a/packages/website/components/page-templates/project-docs.js
+++ b/packages/website/components/page-templates/project-docs.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 
 import DocsNavContent from '../navigation/docs-nav-content';
diff --git a/packages/website/components/page-title.js b/packages/website/components/page-title.js
index c99ba8b3..e689a95d 100644
--- a/packages/website/components/page-title.js
+++ b/packages/website/components/page-title.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
 import Meta from './meta-context';
diff --git a/packages/website/components/switch-link.js b/packages/website/components/switch-link.js
index 308da658..14db2c73 100644
--- a/packages/website/components/switch-link.js
+++ b/packages/website/components/switch-link.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Link from 'next/link';
 import * as PropTypes from 'prop-types';
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example1.js b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example1.js
index ed98def8..5060e187 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example1.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example1.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import DynamicTable from '@atlaskit/dynamic-table';
 import { caption, head, rows } from './content/sample-data';
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example2.js b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example2.js
index 6c2061e1..c5b05053 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example2.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 page';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example3.js b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example3.js
index 6a8184cb..18a3210b 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example3.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 page';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package1/src/index.js b/packages/website/dummy-data/simple-project/packages/mock-package1/src/index.js
index 9e87ecd1..e3d4156a 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package1/src/index.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package1/src/index.js
@@ -1,4 +1,5 @@
 // @flow
+import React from 'react';
 
 type FriendsInfo = {
   /* Name of the person who is asking for a new friend */
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example1.js b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example1.js
index c174d315..6fbcb23b 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example1.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 package 2';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example2.js b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example2.js
index a1b5bcd1..da0e7062 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example2.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 package 2';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example3.js b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example3.js
index 9618444d..b61292a8 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example3.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 package 2';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package2/src/index.js b/packages/website/dummy-data/simple-project/packages/mock-package2/src/index.js
index 1fcafeb7..e7e53039 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package2/src/index.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package2/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 2';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example1.js b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example1.js
index a2f10d45..3a4eae7d 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example1.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 package3';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example2.js b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example2.js
index 25def259..edd1689a 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example2.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 package3';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example3.js b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example3.js
index 3d3034f6..5e517cc1 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example3.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 package3';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package3/src/index.js b/packages/website/dummy-data/simple-project/packages/mock-package3/src/index.js
index d280fb8f..8c2d6d0d 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package3/src/index.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package3/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 1';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/pages/_document.js b/packages/website/pages/_document.js
index 5c4c3c61..4873ec4d 100644
--- a/packages/website/pages/_document.js
+++ b/packages/website/pages/_document.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { extractCritical } from 'emotion-server';
 import { ServerStyleSheet } from 'styled-components';
diff --git a/packages/website/pages/docs.js b/packages/website/pages/docs.js
index d8bbe27c..524c329c 100644
--- a/packages/website/pages/docs.js
+++ b/packages/website/pages/docs.js
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import TableTree, {
   Headers,
   Header,
diff --git a/packages/website/pages/healthcheck.js b/packages/website/pages/healthcheck.js
index 4c770f3d..4a692551 100644
--- a/packages/website/pages/healthcheck.js
+++ b/packages/website/pages/healthcheck.js
@@ -1 +1,3 @@
+import React from 'react';
+
 export default () => <div>OK</div>;
diff --git a/packages/website/pages/helper.js b/packages/website/pages/helper.js
index 3f96c19c..9764d705 100644
--- a/packages/website/pages/helper.js
+++ b/packages/website/pages/helper.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Link from 'next/link';
 import links from '../pages-list';
 
diff --git a/packages/website/pages/packages.js b/packages/website/pages/packages.js
index 6c96aa78..81f154dc 100644
--- a/packages/website/pages/packages.js
+++ b/packages/website/pages/packages.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Table from '@atlaskit/dynamic-table';
 
 import styled from 'styled-components';