diff --git a/.storybook/config.js b/.storybook/config.js
new file mode 100644
index 0000000..0c580a9
--- /dev/null
+++ b/.storybook/config.js
@@ -0,0 +1,8 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories');
+  // require as many stories as you need.
+}
+
+configure(loadStories, module);
\ No newline at end of file
diff --git a/package.json b/package.json
index ec85d08..a299684 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "aphrodite": "^0.3.0"
   },
   "devDependencies": {
+    "@kadira/storybook": "^1.28.1",
     "backbone": "~1.1.2",
     "browserify": "^10.0.0",
     "jquery": "~2.1.1",
@@ -51,6 +52,7 @@
   },
   "scripts": {
     "test": "make test",
-    "prepublish": "node prepublish.js"
+    "prepublish": "node prepublish.js",
+    "storybook": "start-storybook -p 9001"
   }
 }
diff --git a/stories/blur-input.js b/stories/blur-input.js
new file mode 100644
index 0000000..326aa79
--- /dev/null
+++ b/stories/blur-input.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import BlurInput from '../js/blur-input.jsx';
+
+storiesOf('BlurInput', module)
+  .add('default', () => (
+    <BlurInput
+      value='sample value'
+      onChange={action('on-change')}
+    />
+  ));
+  
\ No newline at end of file
diff --git a/stories/button-group.js b/stories/button-group.js
new file mode 100644
index 0000000..13ea634
--- /dev/null
+++ b/stories/button-group.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import ButtonGroup from '../js/button-group.jsx';
+
+storiesOf('ButtonGroup', module)
+  .add('default', () => (
+    <ButtonGroup value="red"
+      buttons={[
+          {value: 'red', content: 'red'},
+          {value: 'green', content: 'green'},
+          {value: 'blue', content: 'blue'}
+      ]}
+      onChange={action('onchange')}
+    />
+  ));
+  
\ No newline at end of file
diff --git a/stories/drag-target.js b/stories/drag-target.js
new file mode 100644
index 0000000..ccd4296
--- /dev/null
+++ b/stories/drag-target.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import DragTarget from '../js/drag-target.jsx';
+
+storiesOf('DragTarget', module)
+  .add('default', () => (
+    <DragTarget onDrop={action('on-drop')}>
+      sample message
+    </DragTarget>
+  ));
+  
\ No newline at end of file
diff --git a/stories/index.js b/stories/index.js
new file mode 100644
index 0000000..e032b02
--- /dev/null
+++ b/stories/index.js
@@ -0,0 +1,10 @@
+import './button-group';
+import './blur-input';
+import './drag-target';
+import './modal';
+import './info-tip';
+import './layered-component-mixin';
+import './multi-button-group';
+import './sortable';
+import './timeago';
+import './tooltip';
diff --git a/stories/info-tip.js b/stories/info-tip.js
new file mode 100644
index 0000000..6a59a8b
--- /dev/null
+++ b/stories/info-tip.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import InfoTip from '../js/info-tip.jsx';
+
+storiesOf('InfoTip', module)
+  .add('default', () => (
+    <InfoTip>
+      <p>
+        <a href="http://sims.wikia.com/wiki/Reticulating_splines">meaningless phrase</a>
+      </p>
+    </InfoTip>
+  ));
+  
\ No newline at end of file
diff --git a/stories/layered-component-mixin.js b/stories/layered-component-mixin.js
new file mode 100644
index 0000000..0bbe62e
--- /dev/null
+++ b/stories/layered-component-mixin.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import DragTarget from '../js/drag-target.jsx';
+
+storiesOf('LayeredComponentMixin', module)
+  .add('default', () => (
+    <DragTarget onDrop={action('on-drop')}>
+      sample message
+    </DragTarget>
+  ));
+  
\ No newline at end of file
diff --git a/stories/modal.js b/stories/modal.js
new file mode 100644
index 0000000..379c4d5
--- /dev/null
+++ b/stories/modal.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Modal from '../js/modal.jsx';
+
+storiesOf('Modal', module)
+  .add('default', () => (
+    <Modal onClose={action('close')}>
+      <div className="modal-header">
+          Header
+          <a href="javascript: void 0;"
+             style={{float: "right", textDecoration: "none"}}
+             onClick={action('close')}>
+              &#215;
+          </a>
+      </div>
+      <div className="modal-body">Body!</div>
+    </Modal>
+  ));
+  
\ No newline at end of file
diff --git a/stories/multi-button-group.js b/stories/multi-button-group.js
new file mode 100644
index 0000000..42f4ab4
--- /dev/null
+++ b/stories/multi-button-group.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import MultiButtonGroup from '../js/multi-button-group.jsx';
+
+storiesOf('MultiButtonGroup', module)
+  .add('default', () => (
+    <MultiButtonGroup
+      values='red'
+      buttons={[
+        {value: 'red', content: 'red'},
+        {value: 'green', content: 'green'},
+        {value: 'blue', content: 'blue'}
+      ]}
+      onChange={action('on-change')}
+    />
+  ));
+  
\ No newline at end of file
diff --git a/stories/sortable.js b/stories/sortable.js
new file mode 100644
index 0000000..2762d79
--- /dev/null
+++ b/stories/sortable.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Sortable from '../js/sortable.jsx';
+
+const components = [
+  <div draggable={true} key="1">1</div>,
+  <div draggable={true} key="2">2</div>,
+  <div draggable={true} key="3">3</div>,
+  <div draggable={true} key="4">4</div>
+];
+
+storiesOf('sortable', module)
+  .add('default', () => (
+    <Sortable
+      components={components}
+     onReorder={action('onReorder')}
+     className="sidebar-list"
+     verify={() => true}
+    />
+  ));
+  
\ No newline at end of file
diff --git a/stories/timeago.js b/stories/timeago.js
new file mode 100644
index 0000000..9e9d8b4
--- /dev/null
+++ b/stories/timeago.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import TimeAgo from '../js/timeago.jsx';
+
+storiesOf('TimeAgo', module)
+  .add('default', () => (
+    <TimeAgo time={new Date()} />
+  ));
+  
\ No newline at end of file
diff --git a/stories/tooltip.js b/stories/tooltip.js
new file mode 100644
index 0000000..6c4a48d
--- /dev/null
+++ b/stories/tooltip.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Tooltip from '../js/tooltip.jsx';
+
+storiesOf('Tooltip', module)
+  .add('default', () => (
+    <Tooltip
+      horizontalPosition="left"
+      horizontalAlign="left"
+      verticalPosition="bottom"
+      arrowSize={10}
+      borderColor="#ccc"
+      show
+    >
+      <div>reticulating splines!</div>
+      <p>
+        <a href="http://sims.wikia.com/wiki/Reticulating_splines">meaningless phrase</a>
+      </p>
+    </Tooltip>
+  ));
+  
\ No newline at end of file