diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
new file mode 100644
index 000000000..1b7cd8eb6
--- /dev/null
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -0,0 +1,12 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { ColorPicker } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('ColorPicker', module).add('ColorPicker', () => {
+    <ColorPicker
+        className={styles['color-picker-container']}
+        value={'#000000'}
+        onChange={function() { alert('Demo item clicked') }}
+    />
+});
diff --git a/storybook/stories/ColorPicker/index.js b/storybook/stories/ColorPicker/index.js
new file mode 100644
index 000000000..ce14eed7d
--- /dev/null
+++ b/storybook/stories/ColorPicker/index.js
@@ -0,0 +1 @@
+require('./ColorPicker');
diff --git a/storybook/stories/ColorPicker/styles.less b/storybook/stories/ColorPicker/styles.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 0068517f9..a15267d5f 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -1,2 +1,3 @@
 require('./Addon');
 require('./MetaItem');
+require('./ColorPicker');