From e425ee8fef6d357763fad0e6080b6382605fbeef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jid=C3=A9?= <jide.fr@gmail.com>
Date: Thu, 7 Apr 2016 02:54:21 +0200
Subject: [PATCH] Document how to customize the layout

---
 docs/api.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/docs/api.md b/docs/api.md
index 52d614f09781..86a03ac6b3c0 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -207,6 +207,25 @@ module.exports = {
 }
 ```
 
+### Customizing The UI
+
+You can customize the UI by duplicating the original components such as  [layout.js](https://raw.githubusercontent.com/kadirahq/react-storybook/master/src/client/ui/layout.js) file, put it in `.storybook/layout.js` and setting webpack config like this :
+
+```js
+const path = require('path');
+
+module.exports = {
+  plugins: [
+    new webpack.NormalModuleReplacementPlugin(/^\.\/layout$/, 'custom-layout')
+  ],
+  resolve: {
+    alias: {
+      'custom-layout': path.resolve('.storybook/layout.js')
+    }
+  }
+}
+```
+
 > You can pass options to this config file as you wish. But, there are some stuff like devServer we'll always add by default. <br/>
 > So, usually you need to use this config for doing following things:
 >  *  For loading CSS.