diff --git a/.storybook/addons.js b/.storybook/addons.js
new file mode 100644
index 00000000..41a31c20
--- /dev/null
+++ b/.storybook/addons.js
@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-options/register'
diff --git a/.storybook/config.js b/.storybook/config.js
index e5e99a88..1d9e1c33 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { configure, addDecorator } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs'
 import { ThemeProvider } from 'styled-components'
 
 import 'styles/global'
@@ -16,4 +17,6 @@ addDecorator(story => (
   </ThemeProvider>
 ))
 
+addDecorator(withKnobs)
+
 configure(loadStories, module)
diff --git a/package.json b/package.json
index 8cf8adc3..ab312959 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,9 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.3.9",
+    "@storybook/addon-knobs": "^3.3.9",
     "@storybook/addon-links": "^3.3.9",
+    "@storybook/addon-options": "^3.3.9",
     "@storybook/addons": "^3.3.9",
     "@storybook/react": "^3.3.9",
     "babel-core": "^6.26.0",
diff --git a/src/components/base/Box.js b/src/components/base/Box/index.js
similarity index 100%
rename from src/components/base/Box.js
rename to src/components/base/Box/index.js
diff --git a/src/components/base/Box/stories.js b/src/components/base/Box/stories.js
new file mode 100644
index 00000000..861283d7
--- /dev/null
+++ b/src/components/base/Box/stories.js
@@ -0,0 +1,94 @@
+import React from 'react'
+
+import { select, boolean, number } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+const stories = storiesOf('Box', module)
+
+const align = [
+  undefined,
+  'baseline',
+  'center',
+  'flex-end',
+  'flex-start',
+  'inherit',
+  'initial',
+  'stretch',
+]
+const justify = [
+  undefined,
+  'center',
+  'flex-end',
+  'flex-start',
+  'inherit',
+  'initial',
+  'space-around',
+  'space-between',
+]
+
+stories.add('basic', () => (
+  <Box
+    align={select('align', align, 'center')}
+    flow={number('flow', undefined)}
+    grow={boolean('grow', false)}
+    horizontal={boolean('horizontal', false)}
+    justify={select('justify', justify, 'center')}
+    padding={number('padding', undefined)}
+    relative={boolean('relative', false)}
+    sticky={boolean('sticky', true)}
+  >
+    \o/
+  </Box>
+))
+
+const Container = props => <Box flow={10} {...props} />
+const Row = props => <Box horizontal flow={10} {...props} />
+const Col = styled(({ color, ...props }) => (
+  <Box
+    align="center"
+    grow
+    justify="center"
+    style={{
+      backgroundColor: color,
+    }}
+    {...props}
+  />
+))`
+  height: 100px;
+`
+
+stories.add('grid example', () => (
+  <Container>
+    <Row>
+      <Col color="blue">1</Col>
+      <Col color="blue">2</Col>
+      <Col color="blue">3</Col>
+      <Col color="blue">4</Col>
+      <Col color="blue">5</Col>
+      <Col color="blue">6</Col>
+      <Col color="blue">7</Col>
+      <Col color="blue">8</Col>
+      <Col color="blue">9</Col>
+      <Col color="blue">10</Col>
+    </Row>
+    <Row>
+      <Col color="red">1</Col>
+      <Col color="red">2</Col>
+      <Col color="red">3</Col>
+      <Col color="red">4</Col>
+      <Col color="red">5</Col>
+      <Col color="red">6</Col>
+    </Row>
+    <Row>
+      <Col color="green">1</Col>
+      <Col color="green">2</Col>
+      <Col color="green">3</Col>
+    </Row>
+    <Row>
+      <Col color="yellow">1</Col>
+    </Row>
+  </Container>
+))
diff --git a/yarn.lock b/yarn.lock
index 0cd01104..ecbc9dd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -115,6 +115,22 @@
     react-inspector "^2.2.2"
     uuid "^3.1.0"
 
+"@storybook/addon-knobs@^3.3.9":
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-3.3.9.tgz#855575557868a97c00ce8de8e2e6960f1580f21c"
+  dependencies:
+    babel-runtime "^6.26.0"
+    deep-equal "^1.0.1"
+    global "^4.3.2"
+    insert-css "^2.0.0"
+    lodash.debounce "^4.0.8"
+    moment "^2.20.1"
+    prop-types "^15.6.0"
+    react-color "^2.11.4"
+    react-datetime "^2.11.1"
+    react-textarea-autosize "^5.2.1"
+    util-deprecate "^1.0.2"
+
 "@storybook/addon-links@^3.3.9":
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.9.tgz#13781ac1c21ddfe347ece6ceab8518c8d1f98a0f"
@@ -123,6 +139,10 @@
     global "^4.3.2"
     prop-types "^15.5.10"
 
+"@storybook/addon-options@^3.3.9":
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-options/-/addon-options-3.3.9.tgz#8dca85ae5c6713ca13bead0e8c39b23c7e2138c0"
+
 "@storybook/addons@^3.3.9":
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.9.tgz#356ce7f1de892d88ca4bc5f686d06e07dd8c2108"
@@ -2516,7 +2536,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.2:
+create-react-class@^15.5.2, create-react-class@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
   dependencies:
@@ -4681,6 +4701,10 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
+insert-css@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
+
 internal-ip@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
@@ -5328,7 +5352,7 @@ lodash@^3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
+lodash@^4.0.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -5414,6 +5438,10 @@ marked@^0.3.9:
     buffers "~0.1.1"
     readable-stream "~1.0.0"
 
+material-colors@^1.2.1:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -5612,6 +5640,10 @@ mkdirp@0.5.0:
   dependencies:
     minimist "0.0.8"
 
+moment@^2.20.1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -5849,6 +5881,10 @@ oauth-sign@~0.8.1, oauth-sign@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -6628,7 +6664,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -6792,6 +6828,25 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.1.7, rc@^1.2.1:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-color@^2.11.4:
+  version "2.13.8"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.13.8.tgz#bcc58f79a722b9bfc37c402e68cd18f26970aee4"
+  dependencies:
+    lodash "^4.0.1"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
+react-datetime@^2.11.1:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-2.11.1.tgz#11d15081dd7d6729284e21c1b8ea7b975e3bdc7e"
+  dependencies:
+    create-react-class "^15.5.2"
+    object-assign "^3.0.0"
+    prop-types "^15.5.7"
+    react-onclickoutside "^6.5.0"
+
 react-docgen@^2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.20.0.tgz#41a6da483a34a4aaed041a9909f5e61864d681cb"
@@ -6889,6 +6944,10 @@ react-motion@^0.5.0:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
+react-onclickoutside@^6.5.0:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"
+
 react-portal@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f"
@@ -6959,6 +7018,12 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
+react-textarea-autosize@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-5.2.1.tgz#2b78f9067180f41b08ac59f78f1581abadd61e54"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-transition-group@^1.1.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
@@ -6989,6 +7054,12 @@ react@^16.1.1, react@^16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  dependencies:
+    lodash "^4.0.1"
+
 read-config-file@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-2.0.1.tgz#4f6f536508ed8863c50c3a2cfd1dbd82ba961b82"
@@ -8180,6 +8251,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"