diff --git a/.storybook/config.js b/.storybook/config.js
new file mode 100644
index 0000000000..2adefcc742
--- /dev/null
+++ b/.storybook/config.js
@@ -0,0 +1,9 @@
+import {configure} from '@kadira/storybook';
+
+const req = require.context('./../Resources/Private/JavaScript', true, /story\.js$/);
+
+function loadStories() {
+    req.keys().forEach(req);
+}
+
+configure(loadStories, module);
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
new file mode 100644
index 0000000000..45e02281a9
--- /dev/null
+++ b/.storybook/webpack.config.js
@@ -0,0 +1,12 @@
+const defaultConfig = require('./../webpack.config');
+
+module.exports = Object.assign({}, defaultConfig, {
+    module: {
+        loaders: [
+            {
+                test: /\.css$/,
+                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+            }
+        ]
+    }
+});
diff --git a/Build/Utilities/Environment.js b/Build/Utilities/Environment.js
index 470f67d05d..463d0948cd 100644
--- a/Build/Utilities/Environment.js
+++ b/Build/Utilities/Environment.js
@@ -1,4 +1,5 @@
 module.exports = {
     isCi: process.env.CI,
-    isTesting: process.env.TEST
+    isTesting: process.env.TEST,
+    isStorybook: process.env.STORY
 };
diff --git a/Resources/Private/JavaScript/Components/Bar/index.story.js b/Resources/Private/JavaScript/Components/Bar/index.story.js
new file mode 100644
index 0000000000..17640d5daa
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Bar/index.story.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Bar from './index.js';
+
+storiesOf('Bar', module)
+    .add('default', () => (
+        <div>
+            <Bar position="top">
+                Top bar
+            </Bar>
+            <Bar position="bottom">
+                Bottom bar
+            </Bar>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Button/index.js b/Resources/Private/JavaScript/Components/Button/index.js
index 7086cd61c4..843932ccfa 100644
--- a/Resources/Private/JavaScript/Components/Button/index.js
+++ b/Resources/Private/JavaScript/Components/Button/index.js
@@ -25,7 +25,6 @@ const Button = props => {
         [styles['btn--lighter']]: style === 'lighter',
         [styles['btn--transparent']]: style === 'transparent',
         [styles['btn--cleanHover']]: hoverStyle === 'clean',
-        [styles['btn--lighterHover']]: hoverStyle === 'lighter',
         [styles['btn--brandHover']]: hoverStyle === 'brand',
         [styles['btn--darkenHover']]: hoverStyle === 'darken',
         [styles['btn--brandActive']]: isActive,
diff --git a/Resources/Private/JavaScript/Components/Button/index.story.js b/Resources/Private/JavaScript/Components/Button/index.story.js
new file mode 100644
index 0000000000..9a668d9f1d
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Button/index.story.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import Button from './index.js';
+
+storiesOf('Button', module)
+    .add('states', () => (
+        <div>
+            <Button onClick={action('onClick')}>Normal state</Button>
+            <Button onClick={action('onClick')} isActive={true}>Active</Button>
+            <Button onClick={action('onClick')} isDisabled={true}>Disabled</Button>
+            <Button onClick={action('onClick')} isFocused={true}>Focused</Button>
+        </div>
+    ))
+    .add('background styles', () => (
+        <div style={{backgroundColor: 'gray'}}>
+            <Button onClick={action('onClick')} style="clean">Clean button</Button>
+            <Button onClick={action('onClick')} style="lighter">Lighter button</Button>
+            <Button onClick={action('onClick')} style="transparent">Transparent button</Button>
+        </div>
+    ))
+    .add('hover styles', () => (
+        <div>
+            <Button onClick={action('onClick')} hoverStyle="clean">Hover clean</Button>
+            <Button onClick={action('onClick')} hoverStyle="darken">Hover darken</Button>
+            <Button onClick={action('onClick')} hoverStyle="brand">Hover brand</Button>
+        </div>
+    ))
+    .add('events', () => (
+        <div>
+            <Button onClick={action('onClick')}>onClick</Button>
+            <Button onClick={action('onClick')} onMouseEnter={action('onMouseEnter')}>onMouseEnter</Button>
+            <Button onClick={action('onClick')} onMouseLeave={action('onMouseLeave')}>onMouseLeave</Button>
+            <Button onClick={action('onClick')} onMouseDown={action('onMouseDown')}>onMouseDown</Button>
+            <Button onClick={action('onClick')} onMouseUp={action('onMouseUp')}>onMouseUp</Button>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/CheckBox/index.story.js b/Resources/Private/JavaScript/Components/CheckBox/index.story.js
new file mode 100644
index 0000000000..64fe2d4ac2
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/CheckBox/index.story.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import CheckBox from './index.js';
+
+storiesOf('CheckBox', module)
+    .add('default', () => (
+        <div>
+            <p>Unchecked:</p>
+            <CheckBox onChange={action('onChange')} isChecked={false}/>
+            <p>Checked:</p>
+            <CheckBox onChange={action('onChange')} isChecked={true}/>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Dialog/index.story.js b/Resources/Private/JavaScript/Components/Dialog/index.story.js
new file mode 100644
index 0000000000..49838c4112
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Dialog/index.story.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import Dialog from './index.js';
+
+storiesOf('Dialog', module)
+    .add('default', () => (
+        <div>
+            <Dialog
+                isOpen={true}
+                wide={true}
+                title="Hello dialog!"
+                onRequestClose={action('onRequestClose')}
+                actions={[
+                    <div>Button</div>
+                ]}
+                >
+                H1ello world
+            </Dialog>
+            <div id="dialog" />
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/DropDown/index.story.js b/Resources/Private/JavaScript/Components/DropDown/index.story.js
new file mode 100644
index 0000000000..a5df783066
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/DropDown/index.story.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import DropDown from './index.js';
+
+storiesOf('DropDown', module)
+    .add('default', () => (
+        <DropDown isOpened={true}>
+            <DropDown.Header>
+                Dropdown header
+            </DropDown.Header>
+            <DropDown.Contents>
+                Dropdown contents
+            </DropDown.Contents>
+        </DropDown>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Grid/index.story.js b/Resources/Private/JavaScript/Components/Grid/index.story.js
new file mode 100644
index 0000000000..a48b21abfd
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Grid/index.story.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Grid from './index.js';
+import GridItem from './GridItem/index.js';
+
+storiesOf('Grid', module)
+    .add('default', () => (
+        <Grid>
+            <GridItem width="33%">Item 1</GridItem>
+            <GridItem width="33%">Item 2</GridItem>
+            <GridItem width="33%">Item 3</GridItem>
+            <GridItem width="33%">Item 4</GridItem>
+            <GridItem width="33%">Item 5</GridItem>
+            <GridItem width="33%">Item 6</GridItem>
+        </Grid>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Headline/index.story.js b/Resources/Private/JavaScript/Components/Headline/index.story.js
new file mode 100644
index 0000000000..442681c171
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Headline/index.story.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Headline from './index.js';
+
+storiesOf('Headline', module)
+    .add('default', () => (
+        <div>
+            <Headline type="h1">Heading 1</Headline>
+            <Headline type="h2">Heading 2</Headline>
+            <Headline type="h3">Heading 3</Headline>
+            <Headline type="h4">Heading 4</Headline>
+            <Headline type="h5">Heading 5</Headline>
+            <Headline type="h6">Heading 6</Headline>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Icon/index.story.js b/Resources/Private/JavaScript/Components/Icon/index.story.js
new file mode 100644
index 0000000000..a0a1b73868
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Icon/index.story.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Icon from './index.js';
+
+storiesOf('Icon', module)
+    .add('size', () => (
+        <div>
+            <div><Icon icon="search" size="big" /></div>
+            <div><Icon icon="search" size="small" /></div>
+            <div><Icon icon="search" size="tiny" /></div>
+        </div>
+    ))
+    .add('padded', () => (
+        <div>
+            <div><Icon icon="search" padded="none" /></div>
+            <div><Icon icon="search" padded="left" /></div>
+            <div><Icon icon="search" padded="right" /></div>
+        </div>
+    ))
+    .add('spin', () => (
+        <div>
+            <Icon icon="search" spin={true} />
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/IconButton/index.story.js b/Resources/Private/JavaScript/Components/IconButton/index.story.js
new file mode 100644
index 0000000000..b08887fe10
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/IconButton/index.story.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import IconButton from './index.js';
+
+storiesOf('IconButton', module)
+    .add('default', () => (
+        <div>
+            <IconButton icon="search" onClick={action('onClick')} style="lighter" />
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/IconButtonDropDown/index.story.js b/Resources/Private/JavaScript/Components/IconButtonDropDown/index.story.js
new file mode 100644
index 0000000000..55d4f6843e
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/IconButtonDropDown/index.story.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import IconButtonDropDown from './index.js';
+import Icon from './../Icon/index.js';
+
+storiesOf('IconButtonDropDown', module)
+    .add('default', () => (
+        <div>
+            <IconButtonDropDown
+                icon="plus"
+                modeIcon="long-arrow-right"
+                onClick={action('onClick')}
+                onItemSelect={action('onItemSelect')}
+                >
+                <Icon dropDownId="prepend" icon="long-arrow-up" />
+                <Icon dropDownId="insert" icon="long-arrow-right" />
+                <Icon dropDownId="append" icon="long-arrow-down" />
+            </IconButtonDropDown>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Label/index.story.js b/Resources/Private/JavaScript/Components/Label/index.story.js
new file mode 100644
index 0000000000..7b46810246
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Label/index.story.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Label from './index.js';
+
+storiesOf('Label', module)
+    .add('default', () => (
+        <div>
+            <Label htmlFor="test">Test label</Label>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Portal/index.story.js b/Resources/Private/JavaScript/Components/Portal/index.story.js
new file mode 100644
index 0000000000..1d3d3a612a
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Portal/index.story.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Portal from './index.js';
+
+storiesOf('Portal', module)
+    .add('default', () => (
+        <Portal isOpened={true}><div>Test portal</div></Portal>
+    ));
diff --git a/Resources/Private/JavaScript/Components/SideBar/index.story.js b/Resources/Private/JavaScript/Components/SideBar/index.story.js
new file mode 100644
index 0000000000..177b4aa8bf
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/SideBar/index.story.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import SideBar from './index.js';
+
+storiesOf('SideBar', module)
+    .add('default', () => (
+        <div>
+            <SideBar position="left">Left sidebar</SideBar>
+            <SideBar position="right">Right sidebar</SideBar>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Tabs/index.story.js b/Resources/Private/JavaScript/Components/Tabs/index.story.js
new file mode 100644
index 0000000000..5b8dead583
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Tabs/index.story.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Tabs from './index.js';
+
+storiesOf('Tabs', module)
+    .add('default', () => (
+        <div>
+            <Tabs>
+                <Tabs.Panel title="Tab 1" icon="search">Tab 1 contents</Tabs.Panel>
+                <Tabs.Panel title="Tab 2" icon="search">Tab 2 contents</Tabs.Panel>
+            </Tabs>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/TextInput/index.story.js b/Resources/Private/JavaScript/Components/TextInput/index.story.js
new file mode 100644
index 0000000000..878164f88f
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/TextInput/index.story.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import TextInput from './index.js';
+
+storiesOf('TextInput', module)
+    .add('default', () => (
+        <div>
+            <TextInput
+                isValid={true}
+                placeholder="Valid input"
+                onChange={action('onChange')}
+                onFocus={action('onFocus')}
+                onBlur={action('onBlur')}
+                />
+            <TextInput
+                isValid={false}
+                placeholder="Invalid input"
+                onChange={action('onChange')}
+                onFocus={action('onFocus')}
+                onBlur={action('onBlur')}
+                />
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/ToggablePanel/index.story.js b/Resources/Private/JavaScript/Components/ToggablePanel/index.story.js
new file mode 100644
index 0000000000..8fefd39af8
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/ToggablePanel/index.story.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import ToggablePanel from './index.js';
+
+storiesOf('ToggablePanel', module)
+    .add('default', () => (
+        <div>
+            <ToggablePanel isOpened={true}>Panel contents</ToggablePanel>
+        </div>
+    ));
diff --git a/Resources/Private/JavaScript/Components/Tree/index.story.js b/Resources/Private/JavaScript/Components/Tree/index.story.js
new file mode 100644
index 0000000000..820fcb24b4
--- /dev/null
+++ b/Resources/Private/JavaScript/Components/Tree/index.story.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import Tree from './index.js';
+
+storiesOf('Tree', module)
+    .add('default', () => (
+        <div>
+            adfasdfa
+            <Tree>
+                <Tree.Node>
+                    <Tree.Node.Header
+                        item={{
+                            hasChildren: true,
+                            isCollapsed: false,
+                            isActive: true,
+                            isFocused: true,
+                            isLoading: false,
+                            hasError: false,
+                            label: 'Active focused node with children'
+                        }}
+                        onNodeToggle={action('onNodeToggle')}
+                        onNodeClick={action('onNodeClick')}
+                        onNodeFocus={action('onNodeFocus')}
+                        />
+                    <Tree.Node.Contents>
+                        <Tree.Node>
+                            <Tree.Node.Header
+                                item={{
+                                    hasChildren: false,
+                                    isCollapsed: true,
+                                    isActive: false,
+                                    isFocused: false,
+                                    isLoading: false,
+                                    hasError: false,
+                                    label: 'Normal node'
+                                }}
+                                onNodeToggle={action('onNodeToggle')}
+                                onNodeClick={action('onNodeClick')}
+                                onNodeFocus={action('onNodeFocus')}
+                                />
+                        </Tree.Node>
+                        <Tree.Node>
+                            <Tree.Node.Header
+                                item={{
+                                    hasChildren: false,
+                                    isCollapsed: true,
+                                    isActive: true,
+                                    isFocused: false,
+                                    isLoading: false,
+                                    hasError: false,
+                                    label: 'Active node'
+                                }}
+                                onNodeToggle={action('onNodeToggle')}
+                                onNodeClick={action('onNodeClick')}
+                                onNodeFocus={action('onNodeFocus')}
+                                />
+                        </Tree.Node>
+                        <Tree.Node>
+                            <Tree.Node.Header
+                                item={{
+                                    hasChildren: false,
+                                    isCollapsed: true,
+                                    isActive: false,
+                                    isFocused: true,
+                                    isLoading: false,
+                                    hasError: false,
+                                    label: 'Focused node'
+                                }}
+                                onNodeToggle={action('onNodeToggle')}
+                                onNodeClick={action('onNodeClick')}
+                                onNodeFocus={action('onNodeFocus')}
+                                />
+                        </Tree.Node>
+                    </Tree.Node.Contents>
+                </Tree.Node>
+            </Tree>
+        </div>
+    ));
diff --git a/karma.entry.js b/karma.entry.js
index fbfeedb26a..90c0113665 100644
--- a/karma.entry.js
+++ b/karma.entry.js
@@ -9,6 +9,6 @@
 // Instead, this way of requiring all spec files results in one big test bundle webpack
 // needs to compile, which is a lot faster than the default configuration.
 //
-const context = require.context('./Resources/Private/JavaScript', true, /.js$/);
+const context = require.context('./Resources/Private/JavaScript', true, /(?!.*story.js$)^.*js$/);
 
 context.keys().forEach(context);
diff --git a/package.json b/package.json
index ab53ec7be2..0f81dfc1c6 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "main": "Resources/Public/JavaScript/Host.js",
   "private": true,
   "devDependencies": {
+    "@kadira/storybook": "^1.27.0",
     "autoprefixer": "^6.2.2",
     "babel-core": "^6.4.0",
     "babel-eslint": "^6.0.2",
@@ -117,7 +118,8 @@
     "watch:karma": "export TEST=true && karma start",
     "watch": "npm run watch:build & npm run watch:karma",
     "prewatch": "Build/check-dependencies",
-    "prebuild": "Build/check-dependencies"
+    "prebuild": "Build/check-dependencies",
+    "storybook": "export STORY=true && start-storybook -p 9001"
   },
   "contributors": [
     {
diff --git a/webpack.config.js b/webpack.config.js
index b772a71cdf..27dec54cbd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -90,7 +90,7 @@ const config = {
 //
 // Adjust the config depending on the env.
 //
-if (!env.isCi && !env.isTesting) {
+if (!env.isCi && !env.isTesting && !env.isStorybook) {
     config.plugins.push(new LiveReloadPlugin({appendScriptTag: true}));
 }