diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md
new file mode 100644
index 00000000..9b865922
--- /dev/null
+++ b/examples/with-react-with-styles/README.md
@@ -0,0 +1,35 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-with-styles)
+
+# Example app with react-with-styles
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-with-styles
+cd with-react-with-styles
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles.
+That means we can serve the required styles for the first render within the HTML and then load the rest in the client.
+In this case we are using [react-with-styles](https://github.com/airbnb/react-with-styles).
+
+For this purpose we are extending the `` and injecting the server side rendered styles into the `
`.
+
+We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/zeit/next.js/tree/v3-beta/examples/with-aphrodite).
\ No newline at end of file
diff --git a/examples/with-react-with-styles/defaultTheme.js b/examples/with-react-with-styles/defaultTheme.js
new file mode 100644
index 00000000..b5c96e60
--- /dev/null
+++ b/examples/with-react-with-styles/defaultTheme.js
@@ -0,0 +1,5 @@
+export default {
+ color: {
+ primary: 'salmon'
+ }
+}
diff --git a/examples/with-react-with-styles/package.json b/examples/with-react-with-styles/package.json
new file mode 100644
index 00000000..fbb0af3b
--- /dev/null
+++ b/examples/with-react-with-styles/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "with-react-with-styles",
+ "version": "1.0.0",
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "aphrodite": "^1.2.1",
+ "next": "latest",
+ "react": "^15.6.1",
+ "react-dom": "^15.6.1",
+ "react-with-styles": "^1.4.0",
+ "react-with-styles-interface-aphrodite": "^1.2.0"
+ },
+ "license": "MIT"
+}
diff --git a/examples/with-react-with-styles/pages/_document.js b/examples/with-react-with-styles/pages/_document.js
new file mode 100644
index 00000000..516cdbc2
--- /dev/null
+++ b/examples/with-react-with-styles/pages/_document.js
@@ -0,0 +1,39 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import { StyleSheetServer } from 'aphrodite'
+
+export default class MyDocument extends Document {
+ static async getInitialProps ({ renderPage }) {
+ const { html, css } = StyleSheetServer.renderStatic(() => renderPage())
+ const ids = css.renderedClassNames
+ return { ...html, css, ids }
+ }
+
+ constructor (props) {
+ super(props)
+ /* Take the renderedClassNames from aphrodite (as generated
+ in getInitialProps) and assign them to __NEXT_DATA__ so that they
+ are accessible to the client for rehydration. */
+ const { __NEXT_DATA__, ids } = props
+ if (ids) {
+ __NEXT_DATA__.ids = this.props.ids
+ }
+ }
+
+ render () {
+ /* Make sure to use data-aphrodite attribute in the style tag here
+ so that aphrodite knows which style tag it's in control of when
+ the client goes to render styles. If you don't you'll get a second
+