diff --git a/README.md b/README.md
index 265c021..9b3843d 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,16 @@ This will start a server on http://localhost:5000 with the UiZoo
 you can change the [components file](https://github.com/myheritage/uizoo.js/blob/master/client/components.js) and the [documentation file](https://github.com/myheritage/uizoo.js/blob/master/client/documentation.js) to start rapidly.
 We recommend updating those files by a script automatically when files are changing (we plan to create plugins to help with this in the next future).
 
-*NPM module will be added soon*
+*or* npm install by:
+```
+npm i -S uizoo
+```
+then in your code, add:
+```
+import 'uizoo/dist/index.css';
+import UiZoo from 'uizoo';
+UiZoo.init(documentation, components, rootElement);
+```
 
 ### init
 ```
diff --git a/client/documentation.js b/client/documentation.js
index 7ef4abb..50ac515 100644
--- a/client/documentation.js
+++ b/client/documentation.js
@@ -1 +1 @@
-export default {"Card":"/**\n * @name \n * Card\n * \n * @module\n * Cards\n * \n * @description\n * Card container with border and box-shadow\n * Wrap children for showing them in a nice frame\n *\n * @example\n * // card with children\n * <Card>\n *  <div>Card content</div>\n *  <br/>\n *  <img src=\"https://i.imgur.com/8CoNRCD.gif\"></img>\n * </Card>\n *\n * @param {String} [className] Append class name to container\n * @param {node} [children] Children elements\n */","CodeCard":"/**\n * @name\n * CodeCard\n * \n * @module\n * Cards\n * \n * @description\n * CodeCard with border and inset box-shadow\n * to show code examples with \"pre\" tag\n *\n * @example\n * <CodeCard>\n *      console.log('You are awesome!');\n * </CodeCard>\n *\n * @param {string} [className] additional className to the element\n * @param {node} children the code that will be formatted\n *\n */","Menu":"/**\n * @name\n * Menu \n * \n * @module\n * Menus\n * \n * @description\n * Menu to select items\n * Wrap MenuItem components with the prop \"value\"\n * and control the chosen value by the Menu prop \"value\"\n * \n * @example\n * // Choose a color\n * <Menu value=\"pink\" onChange={(e, val) => console.log(val)}>\n *    <MenuItem value=\"pink\"\n *          style={{backgroundColor:\"#ecabab\"}}>\n *          Color pink\n *    </MenuItem>\n *    <MenuItem value=\"cyan\"\n *          style={{backgroundColor:\"#66cfdc\"}}>\n *          Color cyan\n *    </MenuItem>\n *    <MenuItem value=\"green\"\n *          style={{backgroundColor:\"#abca87\"}}>\n *          Color green\n *    </MenuItem>\n * </Menu>\n * \n * @param {string|number} [value] current selected value of MenuItem inside the menu\n * @param {function} [onChange] callback for changes in selected value\n * @param {node} children MenuItems to be selected\n */","MenuItem":"/**\n * @name \n * MenuItem\n * \n * @module\n * Menus\n * \n * @description\n * Menu Item to be used in Menu component\n * as a child. fill props.value with this item value.\n * \n * @example \n * <MenuItem>\n *   Menu Item\n * </MenuItem>\n *\n * @param {string|number} value this item value in the menu\n * @param {node} children\n */","Collapsible":"/**\n * @name\n * Collapsible\n * \n * @module\n * Content\n *\n * @description\n * An element that can be closed or opened by clicking on the title\n *\n * @example\n * // Example with some style minimalism\n * <Collapsible\n *      title=\"Click me to open/close the content\"\n *      style={{border: \"1px solid\", padding: \"15px\"}}\n *      contentStyle={{paddingTop: \"15px\"}}>\n *      This is the content\n * </Collapsible>\n *\n * @param {node} title clickable string/element to open/close the content\n * @param {node} children inner content of the Collapsible\n * @param {boolean} [isOpen=true] to control the Collapsible from the outside by passing a boolean value\n * @param {function} [onChange] callback for change of the content state\n * @param {object} [style] outer style of the element\n * @param {object} [titleStyle] the style of the title only\n * @param {object} [contentStyle] the title of the content only\n */","Modal":"/**\n * @name\n * Modal\n * \n * @module\n * Modals\n * \n * @example\n * <Modal>\n *  <div className=\"biblio-modal\" isOpen={true}>\n *  </div>\n * </Modal\n */","RaisedButton":"/**\n * @name \n * RaisedButton\n * \n * @module\n * Buttons\n * \n * @description\n * A styled button for clicking and hovering\n * \n * @example\n * <RaisedButton onClick={(e) => console.log('RaisedButton was clicked, event: ', e)}>\n *    Raised Button Text, test\n * </RaisedButton>\n * \n * @param {function} [onClick] callback for the tooltip was clicked\n * @param {node} children the clickable element that will open the tooltip\n */","Separator":"/**\n * @name\n * Separator\n * \n * @module\n * General\n * \n * @description\n * A generic separator to be used between components\n *\n * @example\n * <Separator/>\n */","TextField":"/**\n * @name\n * TextField\n * \n * @module\n * Inputs\n * \n * @description\n * Text Field with adjustable height\n * It will lengthen the textarea up to 5 rows based on the content in it\n * use props.value to control the component.\n * Try writing in it!\n * \n * @example\n * // Without value\n * <TextField\n *      placeholder=\"Placeholder Text\"\n *      onChange={(e) => console.log('TextField was changed with value: ', e.target.value)}/>\n * \n * @example\n * // With controlled value, change only from the parent\n * <TextField\n *      value=\"Can't change this\"\n *      onChange={(e) => console.log('TextField was changed with value: ', e.target.value)}/>\n * \n * @param {string} [placeholder] value as a placeholder until user input another value\n * @param {string} [value] current value of the text field\n * @param {function} onChange\n */","Tooltip":"/**\n * @name\n * Tooltip\n * \n * @module\n * Content\n * \n * @description\n * Tooltip to be shown on hover or click events.\n * Wrap children to give them the tooltip upon them.\n * This is an auto-location Tooltip. Responsive solution to the tooltip.\n *\n * @example\n * // Default props\n * <Tooltip tooltip={'tooltip inner text!'}>\n *     Click me to open the tooltip!\n * </Tooltip>\n * \n * @example \n * // center bottom directions\n * <Tooltip tooltip={'tooltip inner text on the bottom!'} side=\"bottom\" alignment=\"center\" trigger=\"hover\">\n *     Text to open the tooltip upon on the bottom\n * </Tooltip>\n *\n * @param {node} [tooltip] tooltip inner content, can be text or elements\n * @param {\"top\"|\"bottom\"} [side=top] preferred placement of the tooltip relative to the element\n * @param {\"center\"|\"start\"|\"end\"} [alignment=center] preferred alignment of the tooltip relative to the element\n * @param {\"click\"|\"hover\"} [trigger=click] trigger event, on mobile you should stick with click\n * @param {function} [onTooltipOpen] callback for when the tooltip is opened\n * @param {function} [onAfterTooltipOpen] callback for after the tooltip is opened\n * @param {node} [children] the element/s to be triggering the tooltip appearance\n */"};
\ No newline at end of file
+export default {"Card":"/**\n * @name \n * Card\n * \n * @module\n * Cards\n * \n * @description\n * Card container with border and box-shadow\n * Wrap children for showing them in a nice frame\n *\n * @example\n * // card with children\n * <Card>\n *  <div>Card content</div>\n *  <br/>\n *  <img src=\"https://i.imgur.com/8CoNRCD.gif\"></img>\n * </Card>\n *\n * @param {String} [className] Append class name to container\n * @param {node} [children] Children elements\n */","CodeCard":"/**\n * @name\n * CodeCard\n * \n * @module\n * Cards\n * \n * @description\n * CodeCard with border and inset box-shadow\n * to show code examples with \"pre\" tag\n *\n * @example\n * <CodeCard>\n *      console.log('You are awesome!');\n * </CodeCard>\n *\n * @param {string} [className] additional className to the element\n * @param {node} children the code that will be formatted\n *\n */","Collapsible":"/**\n * @name\n * Collapsible\n * \n * @module\n * Content\n *\n * @description\n * An element that can be closed or opened by clicking on the title\n *\n * @example\n * // Example with some style minimalism\n * <Collapsible\n *      title=\"Click me to open/close the content\"\n *      style={{border: \"1px solid\", padding: \"15px\"}}\n *      contentStyle={{paddingTop: \"15px\"}}>\n *      This is the content\n * </Collapsible>\n *\n * @param {node} title clickable string/element to open/close the content\n * @param {node} children inner content of the Collapsible\n * @param {boolean} [isOpen=true] to control the Collapsible from the outside by passing a boolean value\n * @param {function} [onChange] callback for change of the content state\n * @param {object} [style] outer style of the element\n * @param {object} [titleStyle] the style of the title only\n * @param {object} [contentStyle] the title of the content only\n */","Menu":"/**\n * @name\n * Menu \n * \n * @module\n * Menus\n * \n * @description\n * Menu to select items\n * Wrap MenuItem components with the prop \"value\"\n * and control the chosen value by the Menu prop \"value\"\n * \n * @example\n * // Choose a color\n * <Menu value=\"pink\" onChange={(e, val) => console.log(val)}>\n *    <MenuItem value=\"pink\"\n *          style={{backgroundColor:\"#ecabab\"}}>\n *          Color pink\n *    </MenuItem>\n *    <MenuItem value=\"cyan\"\n *          style={{backgroundColor:\"#66cfdc\"}}>\n *          Color cyan\n *    </MenuItem>\n *    <MenuItem value=\"green\"\n *          style={{backgroundColor:\"#abca87\"}}>\n *          Color green\n *    </MenuItem>\n * </Menu>\n * \n * @param {string|number} [value] current selected value of MenuItem inside the menu\n * @param {function} [onChange] callback for changes in selected value\n * @param {node} children MenuItems to be selected\n */","MenuItem":"/**\n * @name \n * MenuItem\n * \n * @module\n * Menus\n * \n * @description\n * Menu Item to be used in Menu component\n * as a child. fill props.value with this item value.\n * \n * @example \n * <MenuItem>\n *   Menu Item\n * </MenuItem>\n *\n * @param {string|number} value this item value in the menu\n * @param {node} children\n */","Modal":"/**\n * @name\n * Modal\n * \n * @module\n * Modals\n * \n * @example\n * <Modal>\n *  <div className=\"biblio-modal\" isOpen={true}>\n *  </div>\n * </Modal\n */","RaisedButton":"/**\n * @name \n * RaisedButton\n * \n * @module\n * Buttons\n * \n * @description\n * A styled button for clicking and hovering\n * \n * @example\n * <RaisedButton onClick={(e) => console.log('RaisedButton was clicked, event: ', e)}>\n *    Raised Button Text, test\n * </RaisedButton>\n * \n * @param {function} [onClick] callback for the tooltip was clicked\n * @param {node} children the clickable element that will open the tooltip\n */","Separator":"/**\n * @name\n * Separator\n * \n * @module\n * General\n * \n * @description\n * A generic separator to be used between components\n *\n * @example\n * <Separator/>\n */","TextField":"/**\n * @name\n * TextField\n * \n * @module\n * Inputs\n * \n * @description\n * Text Field with adjustable height\n * It will lengthen the textarea up to 5 rows based on the content in it\n * use props.value to control the component.\n * Try writing in it!\n * \n * @example\n * // Without value\n * <TextField\n *      placeholder=\"Placeholder Text\"\n *      onChange={(e) => console.log('TextField was changed with value: ', e.target.value)}/>\n * \n * @example\n * // With controlled value, change only from the parent\n * <TextField\n *      value=\"Can't change this\"\n *      onChange={(e) => console.log('TextField was changed with value: ', e.target.value)}/>\n * \n * @param {string} [placeholder] value as a placeholder until user input another value\n * @param {string} [value] current value of the text field\n * @param {function} onChange\n */","Tooltip":"/**\n * @name\n * Tooltip\n * \n * @module\n * Content\n * \n * @description\n * Tooltip to be shown on hover or click events.\n * Wrap children to give them the tooltip upon them.\n * This is an auto-location Tooltip. Responsive solution to the tooltip.\n *\n * @example\n * // Default props\n * <Tooltip tooltip={'tooltip inner text!'}>\n *     Click me to open the tooltip!\n * </Tooltip>\n * \n * @example \n * // center bottom directions\n * <Tooltip tooltip={'tooltip inner text on the bottom!'} side=\"bottom\" alignment=\"center\" trigger=\"hover\">\n *     Text to open the tooltip upon on the bottom\n * </Tooltip>\n *\n * @param {node} [tooltip] tooltip inner content, can be text or elements\n * @param {\"top\"|\"bottom\"} [side=top] preferred placement of the tooltip relative to the element\n * @param {\"center\"|\"start\"|\"end\"} [alignment=center] preferred alignment of the tooltip relative to the element\n * @param {\"click\"|\"hover\"} [trigger=click] trigger event, on mobile you should stick with click\n * @param {function} [onTooltipOpen] callback for when the tooltip is opened\n * @param {function} [onAfterTooltipOpen] callback for after the tooltip is opened\n * @param {node} [children] the element/s to be triggering the tooltip appearance\n */"};
\ No newline at end of file