diff --git a/.storybook/config.js b/.storybook/config.js
new file mode 100644
index 0000000..86972b2
--- /dev/null
+++ b/.storybook/config.js
@@ -0,0 +1,8 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('../stories/index.js');
+  // You can require as many stories as you need.
+}
+
+configure(loadStories, module);
diff --git a/package.json b/package.json
index 5d2f518..dfc0e8b 100644
--- a/package.json
+++ b/package.json
@@ -17,12 +17,14 @@
     "preversion": "npm run test",
     "prepublishOnly": "npm run dist:es6 && npm run dist:modules",
     "postpublish": "npm run gh-pages && npm run gh-pages:deploy",
-    "postinstall": "node lib/post_install.js"
+    "postinstall": "node lib/post_install.js",
+    "storybook": "start-storybook -p 9001 -c .storybook"
   },
   "main": "dist-modules",
   "module": "dist-es6",
   "jsnext:main": "dist-es6",
   "devDependencies": {
+    "@storybook/react": "^3.4.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
diff --git a/stories/index.js b/stories/index.js
new file mode 100644
index 0000000..1b7159b
--- /dev/null
+++ b/stories/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Demo from '../src/demo';
+
+storiesOf('Demo', module)
+  .add('demo with use case 1', () => (
+    <Demo />
+  ))
+  .add('demo with use case 2', () => (
+    <Demo />
+  ));