diff --git a/examples/basic-css/pages/index.js b/examples/basic-css/pages/index.js
new file mode 100644
index 00000000..9dead5b1
--- /dev/null
+++ b/examples/basic-css/pages/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { css, StyleSheet } from 'next/css'
+
+export default () => (
+
+)
+
+const styles = StyleSheet.create({
+ main: {
+ font: '15px Helvetica, Arial, sans-serif',
+ background: '#eee',
+ padding: '100px',
+ textAlign: 'center',
+ transition: '100ms ease-in background',
+ ':hover': {
+ background: '#ccc'
+ }
+ }
+})
diff --git a/examples/head-elements/pages/index.js b/examples/head-elements/pages/index.js
new file mode 100644
index 00000000..71a72f4a
--- /dev/null
+++ b/examples/head-elements/pages/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Head from 'next/head'
+
+export default () => (
+
+
+
This page has a title 🤔
+
+
+
+
+ This page has a title 🤔
+
+)
diff --git a/examples/hello-world/pages/about.js b/examples/hello-world/pages/about.js
new file mode 100644
index 00000000..759018a0
--- /dev/null
+++ b/examples/hello-world/pages/about.js
@@ -0,0 +1,4 @@
+import React from 'react'
+export default () => (
+ About us
+)
diff --git a/examples/hello-world/pages/index.js b/examples/hello-world/pages/index.js
new file mode 100644
index 00000000..d1b17869
--- /dev/null
+++ b/examples/hello-world/pages/index.js
@@ -0,0 +1,5 @@
+import React from 'react'
+import Link from 'next/link'
+export default () => (
+ Hello World. About
+)
diff --git a/examples/nested-components/components/paragraph.js b/examples/nested-components/components/paragraph.js
new file mode 100644
index 00000000..0332a3da
--- /dev/null
+++ b/examples/nested-components/components/paragraph.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { css, StyleSheet } from 'next/css'
+
+export default ({ children }) => (
+ {children}
+)
+
+const styles = StyleSheet.create({
+ main: {
+ font: '13px Helvetica, Arial',
+ margin: '10px 0'
+ }
+})
diff --git a/examples/nested-components/components/post.js b/examples/nested-components/components/post.js
new file mode 100644
index 00000000..8d90dd91
--- /dev/null
+++ b/examples/nested-components/components/post.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { css, StyleSheet } from 'next/css'
+
+export default ({ title, children }) => (
+
+
{ title }
+ { children }
+
+)
+
+const styles = StyleSheet.create({
+ main: {
+ font: '15px Helvetica, Arial',
+ border: '1px solid #eee',
+ padding: '0 10px'
+ },
+
+ title: {
+ fontSize: '16px',
+ fontWeight: 'bold',
+ margin: '10px 0'
+ }
+})
diff --git a/examples/nested-components/pages/index.js b/examples/nested-components/pages/index.js
new file mode 100644
index 00000000..ef0c632a
--- /dev/null
+++ b/examples/nested-components/pages/index.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import P from '../components/paragraph'
+import Post from '../components/post'
+import { css, StyleSheet } from 'next/css'
+
+export default () => (
+
+
+ Hello there
+ This is an example of a componentized blog post
+
+
+
+
+
+ Hello there
+ This is another example.
+ Wa-hoo!
+
+
+
+
+
+ C'est fin
+
+
+)
+
+const Hr = () =>
+
+const styles = StyleSheet.create({
+ main: {
+ margin: 'auto',
+ maxWidth: '420px',
+ padding: '10px'
+ },
+
+ hr: {
+ width: '100px',
+ borderWidth: 0,
+ margin: '20px auto',
+ textAlign: 'center',
+ ':before': {
+ content: '"***"',
+ color: '#ccc'
+ }
+ }
+})