diff --git a/packages/core/test/configuration_test.js b/packages/core/test/configuration_test.js
index bcbadd8d..a73ab11d 100644
--- a/packages/core/test/configuration_test.js
+++ b/packages/core/test/configuration_test.js
@@ -49,9 +49,10 @@ describe('Configuration', () => {
     it('should resolve components source paths as array', async () => {
       const config = await Configuration.read(opts)
 
-      assert.strictEqual(config.source.components.length, 2)
+      assert.strictEqual(config.source.components.length, 3)
       assert.strictEqual(config.source.components[0], resolve(testProjectPath, 'src', 'elements'))
       assert.strictEqual(config.source.components[1], resolve(testProjectPath, 'src', 'modules'))
+      assert.strictEqual(config.source.components[2], resolve(testProjectPath, 'src', 'examples'))
     })
 
     it('should resolve components source paths as array if string is given', async () => {
diff --git a/packages/core/test/page_test.js b/packages/core/test/page_test.js
index 6072dc4c..2a45b656 100644
--- a/packages/core/test/page_test.js
+++ b/packages/core/test/page_test.js
@@ -72,12 +72,13 @@ describe('Page', () => {
     it('should infer childIds if they are not provided', async () => {
       const data = await Page.fetchById(state, 'testcases')
 
-      assert.strictEqual(data.childIds.length, 5, `Actual children:\n\n${data.childIds.join('\n')}`)
+      assert.strictEqual(data.childIds.length, 6, `Actual children:\n\n${data.childIds.join('\n')}`)
       assertItem(data.childIds, 'testcases/custom-data')
       assertItem(data.childIds, 'testcases/custom-path')
       assertItem(data.childIds, 'testcases/custom-fragment')
       assertItem(data.childIds, 'testcases/custom-fragment-and-template')
       assertItem(data.childIds, 'testcases/custom-template')
+      assertItem(data.childIds, 'testcases/examples')
     })
 
     it('should infer childIds for index if they are not provided', async () => {
@@ -221,7 +222,7 @@ describe('Page', () => {
       const data = await Page.fetchAll(state)
       const pageIds = Object.keys(data)
 
-      assert.strictEqual(pageIds.length, 23)
+      assert.strictEqual(pageIds.length, 24)
 
       assertItem(pageIds, 'index')
       assertItem(pageIds, 'documentation')
@@ -246,6 +247,7 @@ describe('Page', () => {
       assertItem(pageIds, 'testcases/custom-fragment')
       assertItem(pageIds, 'testcases/custom-fragment-and-template')
       assertItem(pageIds, 'testcases/custom-template')
+      assertItem(pageIds, 'testcases/examples')
     })
   })
 })
diff --git a/test/acceptance/integration/navigation.spec.js b/test/acceptance/integration/navigation.spec.js
index aa355e04..c7d8b53c 100644
--- a/test/acceptance/integration/navigation.spec.js
+++ b/test/acceptance/integration/navigation.spec.js
@@ -42,14 +42,15 @@ context('Navigation', () => {
   })
 
   it('should display initially collapsed pages', () => {
-    cy.get('[data-test-navtree-id="patterns/organisms"]').should('not.be.visible')
-    cy.get('[data-test-navitem-id="patterns/organisms"] > button').click()
-    cy.get('[data-test-navtree-id="patterns/organisms"]').should('be.visible')
+    cy.get('[data-test-navtree-id="testcases/examples"]').should('not.be.visible')
+    cy.get('[data-test-navitem-id="testcases/examples"] > button').click()
+    cy.get('[data-test-navtree-id="testcases/examples"]').should('be.visible')
 
     cy.reload()
-    cy.get('[data-test-navtree-id="patterns/organisms"]').should('be.visible')
-    cy.get('[data-test-navitem-id="patterns/organisms"] > button').click()
-    cy.get('[data-test-navtree-id="patterns/organisms"]').should('not.be.visible')
+
+    cy.get('[data-test-navtree-id="testcases/examples"]').should('be.visible')
+    cy.get('[data-test-navitem-id="testcases/examples"] > button').click()
+    cy.get('[data-test-navtree-id="testcases/examples"]').should('not.be.visible')
   })
 
   it('should be toggleable', () => {
diff --git a/test/project/lib/react-client-render.js b/test/project/lib/react-client-render.js
index a9a1583a..1c5acc02 100644
--- a/test/project/lib/react-client-render.js
+++ b/test/project/lib/react-client-render.js
@@ -1,9 +1,9 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { hydrate } from 'react-dom'
 
-export default function clientRender (Component, props) {
-  ReactDOM.hydrate(
-    React.createElement(Component, props),
+export default (Component, props) =>
+  hydrate(
+    <Component {...props} />,
     document.querySelector('#app')
   )
-}
diff --git a/test/project/lib/react-server-render.js b/test/project/lib/react-server-render.js
index 633e87d4..28d9142f 100644
--- a/test/project/lib/react-server-render.js
+++ b/test/project/lib/react-server-render.js
@@ -1,5 +1,6 @@
+// eslint-disable-next-line no-unused-vars
+const React = require('react')
 const { renderToString } = require('react-dom/server')
 
-module.exports = function serverRender (Component, props) {
-  return renderToString(Component(props))
-}
+module.exports = (Component, props) =>
+  renderToString(<Component {...props} />)
diff --git a/test/project/src/examples/ReactContext/ReactContext.jsx b/test/project/src/examples/ReactContext/ReactContext.jsx
new file mode 100644
index 00000000..4d679ce9
--- /dev/null
+++ b/test/project/src/examples/ReactContext/ReactContext.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ThemeContext, { ThemeProvider } from './ThemeContext'
+
+export default () => (
+  <ThemeProvider>
+    <ThemeContext.Consumer>
+      {context => (<h1>Context: {context}</h1>)}
+    </ThemeContext.Consumer>
+  </ThemeProvider>
+)
diff --git a/test/project/src/examples/ReactContext/ThemeContext.js b/test/project/src/examples/ReactContext/ThemeContext.js
new file mode 100644
index 00000000..26f781bc
--- /dev/null
+++ b/test/project/src/examples/ReactContext/ThemeContext.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+const ThemeContext = React.createContext('light')
+
+export class ThemeProvider extends Component {
+  render () {
+    const { children, value = 'dark' } = this.props
+
+    return (
+      <ThemeContext.Provider value={value}>
+        {children}
+      </ThemeContext.Provider>
+    )
+  }
+}
+
+export default ThemeContext
diff --git a/test/project/src/examples/ReactContext/component.config.js b/test/project/src/examples/ReactContext/component.config.js
new file mode 100644
index 00000000..2213321e
--- /dev/null
+++ b/test/project/src/examples/ReactContext/component.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  title: 'React Context'
+}
diff --git a/test/project/src/examples/ReactContext/variants/ReactContext.jsx b/test/project/src/examples/ReactContext/variants/ReactContext.jsx
new file mode 100644
index 00000000..3348d64e
--- /dev/null
+++ b/test/project/src/examples/ReactContext/variants/ReactContext.jsx
@@ -0,0 +1,4 @@
+import React from 'react'
+import ReactContext from '../ReactContext.jsx'
+
+export default props => <ReactContext {...props} />
diff --git a/test/project/uiengine.config.js b/test/project/uiengine.config.js
index 1b680bd0..c9cf0977 100644
--- a/test/project/uiengine.config.js
+++ b/test/project/uiengine.config.js
@@ -24,7 +24,7 @@ module.exports = {
   // - templates contains the variant preview and application templates
   // - pages is the directory of the UIengine's site structure and page markdown files
   source: {
-    components: ['./src/elements', './src/modules'],
+    components: ['./src/elements', './src/modules', './src/examples'],
     templates: './src/templates',
     pages: './uiengine/pages',
     additionalWatches: './lib'
diff --git a/test/project/uiengine/pages/patterns/organisms/page.config.js b/test/project/uiengine/pages/patterns/organisms/page.config.js
index 7173f998..2231dda6 100644
--- a/test/project/uiengine/pages/patterns/organisms/page.config.js
+++ b/test/project/uiengine/pages/patterns/organisms/page.config.js
@@ -1,4 +1,3 @@
 module.exports = {
-  components: ['form'],
-  collapsed: true
+  components: ['form']
 }
diff --git a/test/project/uiengine/pages/testcases/examples/page.config.js b/test/project/uiengine/pages/testcases/examples/page.config.js
new file mode 100644
index 00000000..61254952
--- /dev/null
+++ b/test/project/uiengine/pages/testcases/examples/page.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  components: ['ReactContext'],
+  collapsed: true
+}