diff --git a/examples/with-stitches-styled/README.md b/examples/with-stitches-styled/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ee61611dd820f9d275fe35f66216595b71c0535f
--- /dev/null
+++ b/examples/with-stitches-styled/README.md
@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on ZEIT Now
+
+The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/examples/with-stitches/pages/css.js b/examples/with-stitches-styled/css/index.js
similarity index 100%
rename from examples/with-stitches/pages/css.js
rename to examples/with-stitches-styled/css/index.js
diff --git a/examples/with-stitches-styled/package.json b/examples/with-stitches-styled/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..9f7688677478bf00bfb6922e8735dfb85defdeec
--- /dev/null
+++ b/examples/with-stitches-styled/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "with-stitches-styled",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@stitches/css": "2.0.6",
+    "@stitches/styled": "2.0.6",
+    "next": "9.3.5",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.34",
+    "typescript": "^3.8.3"
+  }
+}
diff --git a/examples/with-stitches-styled/pages/_app.js b/examples/with-stitches-styled/pages/_app.js
new file mode 100644
index 0000000000000000000000000000000000000000..44b984b2953be65ab0a320706898e915792e1f55
--- /dev/null
+++ b/examples/with-stitches-styled/pages/_app.js
@@ -0,0 +1,19 @@
+import App from 'next/app'
+import React from 'react'
+import { createCss } from '@stitches/css'
+import { Provider, config } from '../css'
+
+/*
+  With Typescript:
+  export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {  
+*/
+export default class MyApp extends App {
+  render() {
+    const { Component, pageProps, serverCss } = this.props
+    return (
+      <Provider css={serverCss || createCss(config)}>
+        <Component {...pageProps} />
+      </Provider>
+    )
+  }
+}
diff --git a/examples/with-stitches-styled/pages/_document.js b/examples/with-stitches-styled/pages/_document.js
new file mode 100644
index 0000000000000000000000000000000000000000..37446a385eae74d36143af2bee1291a7de3678e6
--- /dev/null
+++ b/examples/with-stitches-styled/pages/_document.js
@@ -0,0 +1,29 @@
+import Document from 'next/document'
+import { createCss } from '@stitches/css'
+import { config } from '../css'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const css = createCss(config)
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) => <App {...props} serverCss={css} />,
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            <style>{css.getStyles()}</style>
+          </>
+        ),
+      }
+    } finally {
+    }
+  }
+}
diff --git a/examples/with-stitches-styled/pages/index.js b/examples/with-stitches-styled/pages/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..139f87aa79be47a7f4102334b94c4cba4192838e
--- /dev/null
+++ b/examples/with-stitches-styled/pages/index.js
@@ -0,0 +1,7 @@
+import { styled } from '../css'
+
+const Header = styled.h1((css) => css.color('RED'))
+
+export default function Home() {
+  return <Header>Hello world</Header>
+}
diff --git a/examples/with-stitches-styled/public/favicon.ico b/examples/with-stitches-styled/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a
Binary files /dev/null and b/examples/with-stitches-styled/public/favicon.ico differ
diff --git a/examples/with-stitches-styled/public/zeit.svg b/examples/with-stitches-styled/public/zeit.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dd3916c5f04996d70493758ba9e624dc83793c84
--- /dev/null
+++ b/examples/with-stitches-styled/public/zeit.svg
@@ -0,0 +1,10 @@
+<svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
+    <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
+    <defs>
+        <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff"/>
+            <stop offset="1"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/examples/with-stitches/css/index.js b/examples/with-stitches/css/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7357b42f75f0fda4b31f06c6c9ccfd589d55ea2d
--- /dev/null
+++ b/examples/with-stitches/css/index.js
@@ -0,0 +1,30 @@
+import { createConfig } from '@stitches/css'
+import * as React from 'react'
+
+const config = createConfig({
+  tokens: {
+    colors: {
+      RED: 'tomato',
+    },
+  },
+})
+
+/*
+  With Typescript:
+  const context = React.createContext<TCss<typeof config>>(null)
+*/
+const context = React.createContext(null)
+
+/*
+  With Typescript:
+  const Provider: React.FC<{ css: TCss<typeof config> }> = ({ css, children }) => {
+    return <context.Provider value={css}>{children}</context.Provider>
+  }
+*/
+const Provider = ({ css, children }) => {
+  return <context.Provider value={css}>{children}</context.Provider>
+}
+
+const useCss = () => React.useContext(context)
+
+export { config, Provider, useCss }
diff --git a/examples/with-stitches/package.json b/examples/with-stitches/package.json
index 6ceef826fbf5babacb66e957097c8c93b9cfe10a..0487dc2e090c9fc331aecf4eb38f13f30d869bb6 100644
--- a/examples/with-stitches/package.json
+++ b/examples/with-stitches/package.json
@@ -8,8 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@stitches/css": "1.6.1",
-    "@stitches/styled": "1.6.1",
+    "@stitches/css": "2.0.6",
     "next": "9.3.5",
     "react": "16.13.1",
     "react-dom": "16.13.1"
diff --git a/examples/with-stitches/pages/_app.js b/examples/with-stitches/pages/_app.js
index 855e8f2ce7a5fd60e02210674742ca9bee448948..ddb147890ca1a8027d24b363e792dedb94494b88 100644
--- a/examples/with-stitches/pages/_app.js
+++ b/examples/with-stitches/pages/_app.js
@@ -1,11 +1,11 @@
+import { createCss } from '@stitches/css'
 import App from 'next/app'
 import React from 'react'
-import { createCss } from '@stitches/css'
-import { Provider, config } from './css'
+import { config, Provider } from '../css'
 
 /*
   With Typescript:
-  export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {  
+  export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {
 */
 export default class MyApp extends App {
   render() {
diff --git a/examples/with-stitches/pages/_document.js b/examples/with-stitches/pages/_document.js
index 4af32d75cb5d218c45b20c16b9711271542cd684..5de659632367eb01f4a893af10b71cee9a6eff8a 100644
--- a/examples/with-stitches/pages/_document.js
+++ b/examples/with-stitches/pages/_document.js
@@ -1,7 +1,6 @@
 import { createCss } from '@stitches/css'
 import Document from 'next/document'
-
-import { config } from './css'
+import { config } from '../css'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
diff --git a/examples/with-stitches/pages/index.js b/examples/with-stitches/pages/index.js
index dfe78a0b8ab0133bf1a7c80658687617ba709eaa..aac79783121e0fa3432e1ac827f31366b3ada036 100644
--- a/examples/with-stitches/pages/index.js
+++ b/examples/with-stitches/pages/index.js
@@ -1,7 +1,6 @@
-import { styled } from './css'
-
-const Header = styled.h1((css) => css.color('RED'))
+import { useCss } from '../css'
 
 export default function Home() {
-  return <Header>Hello world</Header>
+  const css = useCss()
+  return <h1 className={css.color('RED')}>Hello world</h1>
 }