diff --git a/.babelrc b/.babelrc
index 43cb2bc..c268c77 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,7 +1,3 @@
 {
-  "presets": [
-    "env",
-    "stage-0",
-    "react"
-  ]
+  "presets": ["./.babelrc.js"]
 }
diff --git a/.babelrc.js b/.babelrc.js
new file mode 100644
index 0000000..20c7359
--- /dev/null
+++ b/.babelrc.js
@@ -0,0 +1,11 @@
+const { NODE_ENV, BABEL_ENV } = process.env
+
+const modules = BABEL_ENV === 'cjs' || NODE_ENV === 'test' ? 'commonjs' : false
+
+module.exports = {
+  presets: [
+    ['env', { modules, loose: true }],
+    'stage-0',
+    'react'
+  ]
+}
diff --git a/.gitignore b/.gitignore
index a149e95..74c2bf3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 dist
+node_modules
 coverage
 .nyc_output
 coverage.lcov
diff --git a/package.json b/package.json
index b64788a..996a9a2 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,17 @@
   "name": "macro-components",
   "version": "1.0.0",
   "description": "Create flexible layout and composite UI components without the need to define arbitrary custom props.",
-  "main": "dist/index.js",
+  "main": "dist/macro-components.cjs.js",
+  "module": "dist/macro-components.es.js",
   "scripts": {
-    "prepublish": "babel src -d dist",
+    "prepublish": "npm run build",
+    "build": "rollup -c",
     "start": "x0 dev docs/App.js -o",
     "docs": "x0 build docs/App.js --static --cssLibrary='styled-components' -d docs",
     "cover": "nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov",
-    "bench": "babel-node benchmarks/index.js",
-    "size": "npm run prepublish && bundlesize",
-    "test": "nyc ava"
+    "bench": "cross-env BABEL_ENV=cjs babel-node benchmarks/index.js",
+    "size": "npm run build && bundlesize",
+    "test": "cross-env NODE_ENV=test nyc ava"
   },
   "keywords": [
     "react",
@@ -22,6 +24,7 @@
   ],
   "author": "Brent Jackson",
   "license": "MIT",
+  "sideEffects": false,
   "devDependencies": {
     "@compositor/x0": "^3.0.4",
     "ava": "^0.23.0",
@@ -33,15 +36,21 @@
     "benchmark": "^2.1.4",
     "bundlesize": "^0.15.3",
     "codecov": "^3.0.0",
+    "cross-env": "^5.1.3",
     "nyc": "^11.2.1",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",
+    "rollup": "^0.55.1",
+    "rollup-plugin-babel": "^3.0.3",
     "styled-components": "^2.2.3",
     "styled-system": "^1.0.8",
     "system-components": "^1.1.1"
   },
+  "peerDependencies": {
+    "react": "^15.x || ^16.x"
+  },
   "ava": {
     "require": [
       "babel-register"
@@ -54,7 +63,7 @@
       "maxSize": "0.5 kb"
     },
     {
-      "path": "./dist/index.js",
+      "path": "./dist/macro-components.cjs.js",
       "maxSize": "1.5 kb"
     }
   ]
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..ecd6cb4
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,20 @@
+import babel from 'rollup-plugin-babel'
+import pkg from './package.json'
+
+export default {
+  input: 'src/index.js',
+  output: [{
+    file: pkg.module,
+    format: 'es',
+    exports: 'named',
+  }, {
+    file: pkg.main,
+    format: 'cjs',
+    exports: 'named',
+  }],
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+  plugins: [babel()],
+}
diff --git a/src/index.js b/src/index.js
index c8b7ca3..037a2c5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 export const macro = template => {
   class Macro extends React.Component {