From 4145d8f3248f2dea6e3e2c5180e5bcb950a73df0 Mon Sep 17 00:00:00 2001
From: Shaurya Arora <shaurya.arora1@gmail.com>
Date: Mon, 9 Nov 2015 17:32:18 -0600
Subject: [PATCH] Add import statements to every component's doc page

---
 .../components/pages/components/app-bar.jsx   | 27 ++++++---
 .../components/pages/components/avatars.jsx   | 25 +++++---
 .../app/components/pages/components/badge.jsx | 21 +++++--
 .../components/pages/components/buttons.jsx   | 37 ++++++++----
 .../app/components/pages/components/cards.jsx | 30 ++++++++--
 .../pages/components/date-picker.jsx          | 23 +++++--
 .../components/pages/components/dialog.jsx    | 22 +++++--
 .../pages/components/drop-down-menu.jsx       | 22 +++++--
 .../components/pages/components/grid-list.jsx | 26 +++++---
 .../pages/components/icon-buttons.jsx         | 26 +++++---
 .../pages/components/icon-menus.jsx           | 49 +++++++++------
 .../app/components/pages/components/icons.jsx | 30 ++++++----
 .../components/pages/components/left-nav.jsx  | 22 +++++--
 .../app/components/pages/components/lists.jsx | 60 +++++++++++--------
 .../app/components/pages/components/menus.jsx | 43 ++++++++-----
 .../app/components/pages/components/paper.jsx | 26 +++++---
 .../components/pages/components/progress.jsx  | 25 +++++---
 .../pages/components/refresh-indicator.jsx    | 22 +++++--
 .../components/pages/components/sliders.jsx   | 22 +++++--
 .../components/pages/components/snackbar.jsx  | 22 +++++--
 .../components/pages/components/switches.jsx  | 38 ++++++++----
 .../app/components/pages/components/table.jsx | 31 +++++++---
 .../app/components/pages/components/tabs.jsx  | 24 ++++++--
 .../pages/components/text-fields.jsx          | 28 ++++++---
 .../pages/components/time-picker.jsx          | 24 +++++---
 .../components/pages/components/toolbars.jsx  | 28 ++++++---
 26 files changed, 529 insertions(+), 224 deletions(-)

diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
index e01a768a1c4f4b..b9b0f3b14907ed 100644
--- a/docs/src/app/components/pages/components/app-bar.jsx
+++ b/docs/src/app/components/pages/components/app-bar.jsx
@@ -1,11 +1,12 @@
-let React = require('react');
-let { AppBar, DropDownMenu } = require('material-ui');
-let IconButton = require('icon-button');
-let NavigationClose = require('svg-icons/navigation/close');
-let FlatButton = require('flat-button');
-let ComponentDoc = require('../../component-doc');
-let CodeExample = require('../../code-example/code-example');
-let Code = require('app-bar-code');
+const React = require('react');
+const { AppBar, DropDownMenu, Paper } = require('material-ui');
+const IconButton = require('icon-button');
+const NavigationClose = require('svg-icons/navigation/close');
+const FlatButton = require('flat-button');
+const ComponentDoc = require('../../component-doc');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
+const Code = require('app-bar-code');
 const IconMenu = require('menus/icon-menu');
 const MenuItem = require('menus/menu-item');
 const MoreVertIcon = require('svg-icons/navigation/more-vert');
@@ -113,6 +114,16 @@ export default class AppBarPage extends React.Component {
         name="AppBar"
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst AppBar = require(\'material-ui/lib/app-bar\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <AppBar
             title="Title"
diff --git a/docs/src/app/components/pages/components/avatars.jsx b/docs/src/app/components/pages/components/avatars.jsx
index 552e23f83697c6..d82dfaa90250cb 100644
--- a/docs/src/app/components/pages/components/avatars.jsx
+++ b/docs/src/app/components/pages/components/avatars.jsx
@@ -1,10 +1,11 @@
-let React = require('react');
-let { Avatar, FontIcon, List, ListItem, Styles } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let FileFolder = require('svg-icons/file/folder');
-let { Colors } = Styles;
-let Code = require('avatars-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { Avatar, FontIcon, List, ListItem, Styles, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const FileFolder = require('svg-icons/file/folder');
+const { Colors } = Styles;
+const Code = require('avatars-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 
 export default class AvatarsPage extends React.Component {
@@ -70,6 +71,16 @@ export default class AvatarsPage extends React.Component {
         name="Avatars"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Avatar = require(\'material-ui/lib/avatar\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <List>
             <ListItem leftAvatar={imageAvatar} disabled={true}>Image Avatar</ListItem>
diff --git a/docs/src/app/components/pages/components/badge.jsx b/docs/src/app/components/pages/components/badge.jsx
index 6b3913bdcf4974..4ca67f96986985 100644
--- a/docs/src/app/components/pages/components/badge.jsx
+++ b/docs/src/app/components/pages/components/badge.jsx
@@ -1,12 +1,13 @@
-let React = require('react');
-let { FontIcon, IconButton, Badge } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('badge-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { FontIcon, IconButton, Badge, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('badge-code');
+const CodeExample = require('../../code-example/code-example');
 const NotificationsIcon = require('svg-icons/social/notifications');
 const ShoppingCartIcon = require('svg-icons/action/shopping-cart');
 const FolderIcon = require('svg-icons/file/folder-open');
 const UploadIcon = require('svg-icons/file/cloud-upload');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class BadgePage extends React.Component {
   constructor(props) {
@@ -59,6 +60,16 @@ export default class BadgePage extends React.Component {
         name="Badge"
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Badge = require(\'material-ui/lib/badge\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           
           <Badge badgeContent={4} primary={true}>
diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx
index f19b66d5be70db..d2890faf905374 100644
--- a/docs/src/app/components/pages/components/buttons.jsx
+++ b/docs/src/app/components/pages/components/buttons.jsx
@@ -1,25 +1,27 @@
-let React = require('react');
-let ComponentDoc = require('../../component-doc');
-let mui = require('material-ui');
-let ToggleStar = require('svg-icons/toggle/star');
+const React = require('react');
+const ComponentDoc = require('../../component-doc');
+const mui = require('material-ui');
+const ToggleStar = require('svg-icons/toggle/star');
 
-let {
+const {
   ClearFix,
   FlatButton,
   FloatingActionButton,
   FontIcon,
   RaisedButton,
+  Paper,
   Styles,
   Tab,
   Tabs,
   Utils,
 } = mui;
-let extend = Utils.Extend;
-let { Colors, Typography } = Styles;
-let RaisedButtonCode = require('raised-button-code');
-let FloatingActionButtonCode = require('floating-action-button-code');
-let FlatButtonCode = require('flat-button-code');
-let CodeExample = require('../../code-example/code-example');
+const extend = Utils.Extend;
+const { Colors, Typography } = Styles;
+const RaisedButtonCode = require('raised-button-code');
+const FloatingActionButtonCode = require('floating-action-button-code');
+const FlatButtonCode = require('flat-button-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 
 export default class ButtonPage extends React.Component {
@@ -352,12 +354,25 @@ export default class ButtonPage extends React.Component {
     return (
       <div>
         <h2 style={styles.headline}>Buttons</h2>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst FlatButton = require(\'material-ui/lib/flat-button\');\n' +
+            'const RaisedButton = require(\'material-ui/lib/raised-button\');\n' +
+            'const FloatingActionButton = require(\'material-ui/lib/floating-action-button\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <Tabs>
           <Tab label="Flat Buttons">
             <ComponentDoc
               name=""
               desc={this.desc}
               componentInfo={this.componentInfo.slice(0, 1)}>
+
               <CodeExample code={FlatButtonCode}>
                 <div style={styles.group}>
                   <div style={styles.container}>
diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx
index d4073f478dc28f..121c02a2f10db4 100644
--- a/docs/src/app/components/pages/components/cards.jsx
+++ b/docs/src/app/components/pages/components/cards.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let mui = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const mui = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const CodeExample = require('../../code-example/code-example');
 
-let {
+const {
   Avatar,
   Card,
   CardActions,
@@ -13,8 +13,10 @@ let {
   CardText,
   CardTitle,
   FlatButton,
+  Paper,
 } = mui;
-let Code = require('cards-code');
+const Code = require('cards-code');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class CardPage extends React.Component {
 
@@ -96,6 +98,22 @@ export default class CardPage extends React.Component {
         name="Card"
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst Card = require(\'material-ui/lib/card/card\');\n' +
+            'const CardActions = require(\'material-ui/lib/card/card-actions\');\n' +
+            'const CardExpandable = require(\'material-ui/lib/card/card-expandable\');\n' +
+            'const CardHeader = require(\'material-ui/lib/card/card-header\');\n' +
+            'const CardMedia = require(\'material-ui/lib/card/card-media\');\n' +
+            'const CardText = require(\'material-ui/lib/card/card-text\');\n' +
+            'const CardTitle = require(\'material-ui/lib/card/card-title\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Card>
             <CardHeader
diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
index bab5121b19ad12..c190c4c1754433 100644
--- a/docs/src/app/components/pages/components/date-picker.jsx
+++ b/docs/src/app/components/pages/components/date-picker.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { DatePicker, TextField, Toggle } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('date-picker-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { DatePicker, TextField, Paper, Toggle } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('date-picker-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DatePickerPage extends React.Component {
   constructor(props) {
@@ -196,6 +196,17 @@ export default class DatePickerPage extends React.Component {
       <ComponentDoc
         name="Date Picker"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst DatePicker = require(\'material-ui/lib/date-picker/date-picker\');\n' +
+            'const DatePickerDialog = require(\'material-ui/lib/date-picker/date-picker-dialog\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <DatePicker
             hintText="Portrait Dialog" />
diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx
index e0fa6ba396cf14..b858e46868dad4 100644
--- a/docs/src/app/components/pages/components/dialog.jsx
+++ b/docs/src/app/components/pages/components/dialog.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { Dialog, FlatButton, RaisedButton, Toggle } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('dialog-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { Dialog, FlatButton, RaisedButton, Paper, Toggle } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('dialog-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DialogPage extends React.Component {
 
@@ -170,6 +170,16 @@ export default class DialogPage extends React.Component {
       <ComponentDoc
         name="Dialog"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Dialog = require(\'material-ui/lib/dialog\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <RaisedButton label="Standard Actions" onTouchTap={this._handleStandardDialogTouchTap} />
           <br/><br/>
diff --git a/docs/src/app/components/pages/components/drop-down-menu.jsx b/docs/src/app/components/pages/components/drop-down-menu.jsx
index c3e2e501605bd4..0bf50932e52eec 100644
--- a/docs/src/app/components/pages/components/drop-down-menu.jsx
+++ b/docs/src/app/components/pages/components/drop-down-menu.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { DropDownMenu } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('drop-down-menu-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { DropDownMenu, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('drop-down-menu-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class DropDownMenuPage extends React.Component {
 
@@ -117,6 +117,16 @@ export default class DropDownMenuPage extends React.Component {
       <ComponentDoc
         name="Drop Down Menu"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst DropDownMenu = require(\'material-ui/lib/drop-down-menu\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <DropDownMenu menuItems={menuItems} />
         </CodeExample>
diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx
index de0da2df20fae7..fda7e10432f0d4 100644
--- a/docs/src/app/components/pages/components/grid-list.jsx
+++ b/docs/src/app/components/pages/components/grid-list.jsx
@@ -1,12 +1,13 @@
-let React = require('react');
-let { GridList, GridTile } = require('material-ui');
+const React = require('react');
+const { GridList, GridTile, Paper } = require('material-ui');
 
-let StarBorder = require('svg-icons/toggle/star-border');
-let IconButton = require('icon-button');
+const StarBorder = require('svg-icons/toggle/star-border');
+const IconButton = require('icon-button');
 
-let ComponentDoc = require('../../component-doc');
-let Code = require('grid-list-code');
-let CodeExample = require('../../code-example/code-example');
+const ComponentDoc = require('../../component-doc');
+const Code = require('grid-list-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 class GridListPage extends React.Component {
 
@@ -185,6 +186,17 @@ class GridListPage extends React.Component {
         code={this.code}
         desc={this.desc}
         componentInfo={this.componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst GridList = require(\'material-ui/lib/grid-list/grid-list\');\n' +
+            'const GridTile = require(\'material-ui/lib/grid-list/grid-tile\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
             {/* Basic grid list with mostly default options */}
diff --git a/docs/src/app/components/pages/components/icon-buttons.jsx b/docs/src/app/components/pages/components/icon-buttons.jsx
index 3265b03aba6b1f..6a1c2daee16fbf 100644
--- a/docs/src/app/components/pages/components/icon-buttons.jsx
+++ b/docs/src/app/components/pages/components/icon-buttons.jsx
@@ -1,11 +1,11 @@
-let React = require('react');
-let { FontIcon, IconButton, NavigationMenu } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let ActionGrade = require('svg-icons/action/grade');
-let ActionHome = require('svg-icons/action/home');
-let Code = require('icon-buttons-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { FontIcon, IconButton, NavigationMenu, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const ActionGrade = require('svg-icons/action/grade');
+const ActionHome = require('svg-icons/action/home');
+const Code = require('icon-buttons-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class IconButtonsPage extends React.Component {
 
@@ -115,6 +115,16 @@ export default class IconButtonsPage extends React.Component {
         name="Icon Buttons"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst IconButton = require(\'material-ui/lib/icon-button\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-right"  tooltipPosition = "bottom-right" />
 
diff --git a/docs/src/app/components/pages/components/icon-menus.jsx b/docs/src/app/components/pages/components/icon-menus.jsx
index 4ff81b48069b00..c26da0ec406acf 100644
--- a/docs/src/app/components/pages/components/icon-menus.jsx
+++ b/docs/src/app/components/pages/components/icon-menus.jsx
@@ -1,22 +1,22 @@
-let React = require('react');
-let { IconButton } = require('material-ui');
-let IconMenu = require('menus/icon-menu');
-let MenuItem = require('menus/menu-item');
-let MenuDivider = require('menus/menu-divider');
-let MoreVertIcon = require('svg-icons/navigation/more-vert');
-let ComponentDoc = require('../../component-doc');
-
-let ContentCopy = require('svg-icons/content/content-copy');
-let ContentFilter = require('svg-icons/content/filter-list');
-let ContentLink = require('svg-icons/content/link');
-let Delete = require('svg-icons/action/delete');
-let Download = require('svg-icons/file/file-download');
-let MapsPlace = require('svg-icons/maps/place');
-let PersonAdd = require('svg-icons/social/person-add');
-let RemoveRedEye = require('svg-icons/image/remove-red-eye');
-let Code = require('icon-menus-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { IconButton, Paper } = require('material-ui');
+const IconMenu = require('menus/icon-menu');
+const MenuItem = require('menus/menu-item');
+const MenuDivider = require('menus/menu-divider');
+const MoreVertIcon = require('svg-icons/navigation/more-vert');
+const ComponentDoc = require('../../component-doc');
+
+const ContentCopy = require('svg-icons/content/content-copy');
+const ContentFilter = require('svg-icons/content/filter-list');
+const ContentLink = require('svg-icons/content/link');
+const Delete = require('svg-icons/action/delete');
+const Download = require('svg-icons/file/file-download');
+const MapsPlace = require('svg-icons/maps/place');
+const PersonAdd = require('svg-icons/social/person-add');
+const RemoveRedEye = require('svg-icons/image/remove-red-eye');
+const Code = require('icon-menus-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class IconMenus extends React.Component {
 
@@ -152,6 +152,17 @@ export default class IconMenus extends React.Component {
         name="Icon Menus"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst IconMenu = require(\'material-ui/lib/menus/icon-menu\');\n' +
+            'const MenuItem = require(\'material-ui/lib/menus/menu-item\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <br/>
 
diff --git a/docs/src/app/components/pages/components/icons.jsx b/docs/src/app/components/pages/components/icons.jsx
index 99c64f6dfa9d7b..833fb0f6add53d 100644
--- a/docs/src/app/components/pages/components/icons.jsx
+++ b/docs/src/app/components/pages/components/icons.jsx
@@ -1,13 +1,13 @@
-let React = require('react');
-let { ClearFix, FontIcon, Styles, Paper } = require('material-ui');
-let CodeBlock = require('../../code-example/code-block');
-let ComponentDoc = require('../../component-doc');
-let ActionHome = require('svg-icons/action/home');
+const React = require('react');
+const { ClearFix, FontIcon, Styles, Paper } = require('material-ui');
+const CodeBlock = require('../../code-example/code-block');
+const ComponentDoc = require('../../component-doc');
+const ActionHome = require('svg-icons/action/home');
 
-let { Colors, Typography } = Styles;
-let IconButtonCode = require('icons-code');
-let SvgIconsCode = require('svg-icons-code');
-let CodeExample = require('../../code-example/code-example');
+const { Colors, Typography } = Styles;
+const IconButtonCode = require('icons-code');
+const SvgIconsCode = require('svg-icons-code');
+const CodeExample = require('../../code-example/code-example');
 
 
 export default class FontIconPage extends React.Component {
@@ -38,7 +38,7 @@ export default class FontIconPage extends React.Component {
         and reference the icon&#39;s className in the "className" prop. <br /><br />
         We also support <a title="Google's
         Material Icons" href="https://google.github.io/material-design-icons">Google&#39;s
-        Material Icons</a> as seen in the third block of code. If you're using the material icons, be sure to include the link to the font icon file in your head section:
+        Material Icons</a> as seen in the third block of code. If you&#39;re using the material icons, be sure to include the link to the font icon file in your head section:
         <Paper>
           <CodeBlock>
             {'<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">'}
@@ -119,6 +119,16 @@ export default class FontIconPage extends React.Component {
           name="Font Icons"
           desc={fontIconDesc}
           componentInfo={componentInfo.slice(0, 1)}>
+
+          <Paper style = {{marginBottom: '22px'}}>
+            <CodeBlock>
+            {
+              '//Import statement:\nconst FontIcon = require(\'material-ui/lib/font-icon\');\n\n' +
+              '//See material-ui/lib/index.js for more\n'
+            }
+            </CodeBlock>
+          </Paper>
+
           <CodeExample code={IconButtonCode}>
             <FontIcon className="muidocs-icon-action-home" style={iconStyles} />
             <FontIcon className="muidocs-icon-action-home" style={iconStyles} color={Colors.red500} />
diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx
index a1052f9d8a8077..b6497f1db515c1 100644
--- a/docs/src/app/components/pages/components/left-nav.jsx
+++ b/docs/src/app/components/pages/components/left-nav.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { LeftNav, MenuItem, RaisedButton } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('left-nav-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { LeftNav, MenuItem, RaisedButton, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('left-nav-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class LeftNavPage extends React.Component {
 
@@ -141,6 +141,16 @@ export default class LeftNavPage extends React.Component {
       <ComponentDoc
         name="Left Nav"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst LeftNav = require(\'material-ui/lib/left-nav\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div>
             <div>
diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
index 6c05d6ad378c2f..119fee1dba9ec8 100644
--- a/docs/src/app/components/pages/components/lists.jsx
+++ b/docs/src/app/components/pages/components/lists.jsx
@@ -1,21 +1,21 @@
-let React = require('react');
-let mui = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let MobileTearSheet = require('../../mobile-tear-sheet');
-let ActionAssignment = require('svg-icons/action/assignment');
-let ActionGrade = require('svg-icons/action/grade');
-let ActionInfo = require('svg-icons/action/info');
-let CommunicationCall = require('svg-icons/communication/call');
-let CommunicationChatBubble = require('svg-icons/communication/chat-bubble');
-let CommunicationEmail = require('svg-icons/communication/email');
-let ContentDrafts = require('svg-icons/content/drafts');
-let ContentInbox = require('svg-icons/content/inbox');
-let ContentSend = require('svg-icons/content/send');
-let EditorInsertChart = require('svg-icons/editor/insert-chart');
-let FileFolder = require('svg-icons/file/folder');
-let MoreVertIcon = require('svg-icons/navigation/more-vert');
+const React = require('react');
+const mui = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const MobileTearSheet = require('../../mobile-tear-sheet');
+const ActionAssignment = require('svg-icons/action/assignment');
+const ActionGrade = require('svg-icons/action/grade');
+const ActionInfo = require('svg-icons/action/info');
+const CommunicationCall = require('svg-icons/communication/call');
+const CommunicationChatBubble = require('svg-icons/communication/chat-bubble');
+const CommunicationEmail = require('svg-icons/communication/email');
+const ContentDrafts = require('svg-icons/content/drafts');
+const ContentInbox = require('svg-icons/content/inbox');
+const ContentSend = require('svg-icons/content/send');
+const EditorInsertChart = require('svg-icons/editor/insert-chart');
+const FileFolder = require('svg-icons/file/folder');
+const MoreVertIcon = require('svg-icons/navigation/more-vert');
 
-let {
+const {
   Avatar,
   Checkbox,
   IconButton,
@@ -24,16 +24,16 @@ let {
   ListItem,
   Styles,
   Toggle,
+  Paper,
 } = mui;
 
-let IconMenu = require('menus/icon-menu');
-let MenuItem = require('menus/menu-item');
-
-let { Colors } = Styles;
-let Code = require('lists-code');
-let CodeExample = require('../../code-example/code-example');
-
+const IconMenu = require('menus/icon-menu');
+const MenuItem = require('menus/menu-item');
 
+const { Colors } = Styles;
+const Code = require('lists-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class ListsPage extends React.Component {
 
@@ -248,6 +248,18 @@ export default class ListsPage extends React.Component {
       <ComponentDoc
         name="Lists"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst List = require(\'material-ui/lib/lists/list\');\n' +
+            'const ListDivider = require(\'material-ui/lib/lists/list-divider\');\n' +
+            'const ListItem = require(\'material-ui/lib/lists/list-item\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <MobileTearSheet>
             <List>
diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
index 93314a0c667a09..b48e3b5c88358b 100644
--- a/docs/src/app/components/pages/components/menus.jsx
+++ b/docs/src/app/components/pages/components/menus.jsx
@@ -1,20 +1,21 @@
-let React = require('react');
+const React = require('react');
 const ReactTransitionGroup = require('react-addons-transition-group');
-let Menu = require('menus/menu');
-let MenuItem = require('menus/menu-item');
-let MenuDivider = require('menus/menu-divider');
-let ComponentDoc = require('../../component-doc');
-
-let ArrowDropRight = require('svg-icons/navigation-arrow-drop-right');
-let ContentCopy = require('svg-icons/content/content-copy');
-let ContentLink = require('svg-icons/content/link');
-let Delete = require('svg-icons/action/delete');
-let Download = require('svg-icons/file/file-download');
-let PersonAdd = require('svg-icons/social/person-add');
-let RemoveRedEye = require('svg-icons/image/remove-red-eye');
-let Code = require('menus-code');
-let CodeExample = require('../../code-example/code-example');
+const Paper = require('paper');
+const Menu = require('menus/menu');
+const MenuItem = require('menus/menu-item');
+const MenuDivider = require('menus/menu-divider');
+const ComponentDoc = require('../../component-doc');
 
+const ArrowDropRight = require('svg-icons/navigation-arrow-drop-right');
+const ContentCopy = require('svg-icons/content/content-copy');
+const ContentLink = require('svg-icons/content/link');
+const Delete = require('svg-icons/action/delete');
+const Download = require('svg-icons/file/file-download');
+const PersonAdd = require('svg-icons/social/person-add');
+const RemoveRedEye = require('svg-icons/image/remove-red-eye');
+const Code = require('menus-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class MenusPage extends React.Component {
 
@@ -215,6 +216,18 @@ export default class MenusPage extends React.Component {
         name="Menus"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Menu = require(\'material-ui/lib/menus/menu\');\n' +
+            'const MenuItem = require(\'material-ui/lib/menus/menu-item\');\n' +
+            'const MenuDivider = require(\'material-ui/lib/menus/menu-divider\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Menu style={styles.menu}>
             <MenuItem primaryText="Maps" />
diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx
index 00ea47d4b61f0e..ea3d0f6087ea0e 100644
--- a/docs/src/app/components/pages/components/paper.jsx
+++ b/docs/src/app/components/pages/components/paper.jsx
@@ -1,13 +1,13 @@
-let React = require('react');
-let { ClearFix, Mixins, Paper } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
+const React = require('react');
+const { ClearFix, Mixins, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
 
-let { StyleResizable } = Mixins;
-let Code = require('paper-code');
-let CodeExample = require('../../code-example/code-example');
+const { StyleResizable } = Mixins;
+const Code = require('paper-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
-
-let PaperPage = React.createClass ({
+const PaperPage = React.createClass ({
 
   mixins: [StyleResizable],
 
@@ -84,6 +84,16 @@ let PaperPage = React.createClass ({
       <ComponentDoc
         name="Paper"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Paper = require(\'material-ui/lib/paper\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div>
             <ClearFix style={groupStyle}>
diff --git a/docs/src/app/components/pages/components/progress.jsx b/docs/src/app/components/pages/components/progress.jsx
index 0b2467fda17483..aed803bfab6119 100644
--- a/docs/src/app/components/pages/components/progress.jsx
+++ b/docs/src/app/components/pages/components/progress.jsx
@@ -1,11 +1,11 @@
-let React = require('react');
-let { CircularProgress, LinearProgress } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('progress-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { CircularProgress, LinearProgress, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('progress-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
-
-let ProgressPage = React.createClass({
+const ProgressPage = React.createClass({
 
   getInitialState () {
     return {
@@ -81,6 +81,17 @@ let ProgressPage = React.createClass({
       <ComponentDoc
         name="Progress"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst CircularProgress = require(\'material-ui/lib/circular-progress\');\n' +
+            'const LinearProgress = require(\'material-ui/lib/linear-progress\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <h2>Linear Progress</h2>
           <p>
diff --git a/docs/src/app/components/pages/components/refresh-indicator.jsx b/docs/src/app/components/pages/components/refresh-indicator.jsx
index 6c71795d89cc88..b66cd4ae810443 100644
--- a/docs/src/app/components/pages/components/refresh-indicator.jsx
+++ b/docs/src/app/components/pages/components/refresh-indicator.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { RefreshIndicator } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('refresh-indicator-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { RefreshIndicator, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('refresh-indicator-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 let RefreshIndicatorPage = React.createClass({
 
@@ -58,6 +58,16 @@ let RefreshIndicatorPage = React.createClass({
       <ComponentDoc
         name="RefreshIndicator"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst RefreshIndicator = require(\'material-ui/lib/refresh-indicator\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div style={{ position: "relative" }}>
             <p>
diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx
index 1989c614f269d9..681bb76ef3073c 100644
--- a/docs/src/app/components/pages/components/sliders.jsx
+++ b/docs/src/app/components/pages/components/sliders.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { Slider } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('sliders-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { Paper, Slider } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('sliders-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class SlidersPage extends React.Component {
 
@@ -129,6 +129,16 @@ export default class SlidersPage extends React.Component {
       <ComponentDoc
         name="Sliders"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Slider = require(\'material-ui/lib/slider\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Slider name="slider1" />
           <Slider name="slider2" defaultValue={0.5} step={0.10} />
diff --git a/docs/src/app/components/pages/components/snackbar.jsx b/docs/src/app/components/pages/components/snackbar.jsx
index ece71d615ce48d..b6684f7d67fef7 100644
--- a/docs/src/app/components/pages/components/snackbar.jsx
+++ b/docs/src/app/components/pages/components/snackbar.jsx
@@ -1,9 +1,9 @@
-let React = require('react');
-let { RaisedButton, Snackbar, TextField } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('snackbars-code');
-let CodeExample = require('../../code-example/code-example');
-
+const React = require('react');
+const { RaisedButton, Snackbar, TextField, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('snackbars-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class SnackbarPage extends React.Component {
 
@@ -98,6 +98,16 @@ export default class SnackbarPage extends React.Component {
       <ComponentDoc
         name="Snackbar"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Snackbar = require(\'material-ui/lib/snackbar\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <RaisedButton
             onTouchTap={this._handleClick}
diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx
index 3ca9ab522a6bbf..e48be9a95efb31 100644
--- a/docs/src/app/components/pages/components/switches.jsx
+++ b/docs/src/app/components/pages/components/switches.jsx
@@ -1,11 +1,11 @@
-let React = require('react');
-let mui = require('material-ui');
-let CodeExample = require('../../code-example/code-example');
-let ComponentDoc = require('../../component-doc');
-let ToggleStar = require('svg-icons/toggle/star');
-let ToggleStarBorder = require('svg-icons/toggle/star-border');
+const React = require('react');
+const mui = require('material-ui');
+const CodeExample = require('../../code-example/code-example');
+const ComponentDoc = require('../../component-doc');
+const ToggleStar = require('svg-icons/toggle/star');
+const ToggleStarBorder = require('svg-icons/toggle/star-border');
 
-let {
+const {
   Checkbox,
   ClearFix,
   RadioButton,
@@ -15,12 +15,13 @@ let {
   Tab,
   Tabs,
   Toggle,
+  Paper,
 } = mui;
-let { Typography } = Styles;
-let CheckboxCode = require('checkbox-code');
-let RadioButtonCode = require('radio-buttons-code');
-let ToggleCode = require('toggle-code');
-
+const { Typography } = Styles;
+const CheckboxCode = require('checkbox-code');
+const RadioButtonCode = require('radio-buttons-code');
+const ToggleCode = require('toggle-code');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class SwitchesPage extends React.Component {
 
@@ -347,6 +348,19 @@ export default class SwitchesPage extends React.Component {
     return (
       <div>
       <h2 style={this.getStyles().headline}>Switches</h2>
+
+      <Paper style = {{marginBottom: '22px'}}>
+        <CodeBlock>
+        {
+          '//Import statements:\nconst Checkbox = require(\'material-ui/lib/checkbox\');\n' +
+          'const RadioButton = require(\'material-ui/lib/radio-button\');\n' +
+          'const RadioButtonGroup = require(\'material-ui/lib/radio-button-group\');\n' +
+          'const Toggle = require(\'material-ui/lib/toggle\');\n\n' +
+          '//See material-ui/lib/index.js for more\n'
+        }
+        </CodeBlock>
+      </Paper>
+
       <Tabs>
         <Tab label="Checkbox">
           <ComponentDoc
diff --git a/docs/src/app/components/pages/components/table.jsx b/docs/src/app/components/pages/components/table.jsx
index 28101351862c61..fba22c2e264b51 100644
--- a/docs/src/app/components/pages/components/table.jsx
+++ b/docs/src/app/components/pages/components/table.jsx
@@ -1,8 +1,8 @@
-let React = require('react');
-let CodeExample = require('../../code-example/code-example');
-let Router = require('react-router');
-let ComponentDoc = require('../../component-doc');
-let {
+const React = require('react');
+const CodeExample = require('../../code-example/code-example');
+const Router = require('react-router');
+const ComponentDoc = require('../../component-doc');
+const {
   Table,
   TableBody,
   TableHeader,
@@ -12,10 +12,11 @@ let {
   TableRowColumn,
   TextField,
   Toggle,
+  Paper,
 } = require('material-ui');
 
-let Code = require('table-code');
-
+const Code = require('table-code');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class TablePage extends React.Component {
 
@@ -386,6 +387,22 @@ export default class TablePage extends React.Component {
         name="Table"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statements:\nconst Table = require(\'material-ui/lib/table/table\');\n' +
+            'const TableBody = require(\'material-ui/lib/table/table-body\');\n' +
+            'const TableFooter = require(\'material-ui/lib/table/table-footer\');\n' +
+            'const TableHeader = require(\'material-ui/lib/table/table-header\');\n' +
+            'const TableHeaderColumn = require(\'material-ui/lib/table/table-header-column\');\n' +
+            'const TableRow = require(\'material-ui/lib/table/table-row\');\n' +
+            'const TableRowColumn = require(\'material-ui/lib/table/table-row-column\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <div className="table-examples">
             <Table
diff --git a/docs/src/app/components/pages/components/tabs.jsx b/docs/src/app/components/pages/components/tabs.jsx
index 0dbbbfedee3ff1..8fd23066534a68 100644
--- a/docs/src/app/components/pages/components/tabs.jsx
+++ b/docs/src/app/components/pages/components/tabs.jsx
@@ -1,10 +1,11 @@
-let React = require('react');
-let CodeExample = require('../../code-example/code-example');
-let {IconButton, Slider, Styles, Tab, Tabs } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let { Colors, Typography } = Styles;
-let Code = require('tabs-code');
+const React = require('react');
+const CodeExample = require('../../code-example/code-example');
+const {IconButton, Slider, Styles, Tab, Tabs, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const { Colors, Typography } = Styles;
+const Code = require('tabs-code');
 const SwipeableViews = require('react-swipeable-views');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class TabsPage extends React.Component {
 
@@ -163,6 +164,17 @@ export default class TabsPage extends React.Component {
         name="Tabs"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Tabs = require(\'material-ui/lib/tabs/tabs\');\n' +
+            'const Tab = require(\'material-ui/lib/tabs/tab\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Tabs>
             <Tab label="Item One" >
diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx
index 658a3287830c4d..69a07a81a1ca0d 100644
--- a/docs/src/app/components/pages/components/text-fields.jsx
+++ b/docs/src/app/components/pages/components/text-fields.jsx
@@ -1,13 +1,14 @@
-let React = require('react');
-let { ClearFix, Mixins, SelectField, TextField, Styles } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let { Colors } = Styles;
-let { StyleResizable } = Mixins;
-let Code = require('text-fields-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { ClearFix, Mixins, SelectField, TextField, Styles, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const { Colors } = Styles;
+const { StyleResizable } = Mixins;
+const Code = require('text-fields-code');
+const CodeExample = require('../../code-example/code-example');
 const LinkedStateMixin = require('react-addons-linked-state-mixin');
+const CodeBlock = require('../../code-example/code-block');
 
-let TextFieldsPage = React.createClass({
+const TextFieldsPage = React.createClass({
 
   mixins: [StyleResizable, LinkedStateMixin],
 
@@ -247,6 +248,17 @@ let TextFieldsPage = React.createClass({
         name="Text Field"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst TextField = require(\'material-ui/lib/text-field\');\n' +
+            'const SelectField = require(\'material-ui/lib/select-field\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <ClearFix>
             <div style={styles.group}>
diff --git a/docs/src/app/components/pages/components/time-picker.jsx b/docs/src/app/components/pages/components/time-picker.jsx
index c231ed1207353f..7226f793619b72 100644
--- a/docs/src/app/components/pages/components/time-picker.jsx
+++ b/docs/src/app/components/pages/components/time-picker.jsx
@@ -1,11 +1,11 @@
-let React = require('react');
-let { TimePicker } = require('material-ui');
-let ComponentDoc = require('../../component-doc');
-let Code = require('time-picker-code');
-let CodeExample = require('../../code-example/code-example');
+const React = require('react');
+const { TimePicker, Paper } = require('material-ui');
+const ComponentDoc = require('../../component-doc');
+const Code = require('time-picker-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
-
-let TimePickerPage = React.createClass({
+const TimePickerPage = React.createClass({
 
   render() {
 
@@ -131,6 +131,16 @@ let TimePickerPage = React.createClass({
       <ComponentDoc
         name="Time Picker"
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst TimePicker = require(\'material-ui/lib/time-picker\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <TimePicker
             ref="picker12hr"
diff --git a/docs/src/app/components/pages/components/toolbars.jsx b/docs/src/app/components/pages/components/toolbars.jsx
index 074e3b68200673..62c0b66dc54a61 100644
--- a/docs/src/app/components/pages/components/toolbars.jsx
+++ b/docs/src/app/components/pages/components/toolbars.jsx
@@ -1,8 +1,8 @@
-let React = require('react');
-let mui = require('material-ui');
-let ComponentDoc = require('../../component-doc');
+const React = require('react');
+const mui = require('material-ui');
+const ComponentDoc = require('../../component-doc');
 
-let {
+const {
   DropDownIcon,
   DropDownMenu,
   FontIcon,
@@ -11,10 +11,11 @@ let {
   ToolbarGroup,
   ToolbarSeparator,
   ToolbarTitle,
+  Paper,
 } = mui;
-let Code = require('toolbars-code');
-let CodeExample = require('../../code-example/code-example');
-
+const Code = require('toolbars-code');
+const CodeExample = require('../../code-example/code-example');
+const CodeBlock = require('../../code-example/code-block');
 
 export default class ToolbarPage extends React.Component {
 
@@ -109,6 +110,19 @@ export default class ToolbarPage extends React.Component {
         name="Toolbars"
         desc={desc}
         componentInfo={componentInfo}>
+
+        <Paper style = {{marginBottom: '22px'}}>
+          <CodeBlock>
+          {
+            '//Import statement:\nconst Toolbar = require(\'material-ui/lib/toolbar/toolbar\');\n' +
+            'const ToolbarGroup = require(\'material-ui/lib/toolbar/toolbar-group\');\n' +
+            'const ToolbarSeparator = require(\'material-ui/lib/toolbar/toolbar-separator\');\n' +
+            'const ToolbarTitle = require(\'material-ui/lib/toolbar/toolbar-title\');\n\n' +
+            '//See material-ui/lib/index.js for more\n'
+          }
+          </CodeBlock>
+        </Paper>
+
         <CodeExample code={Code}>
           <Toolbar>
             <ToolbarGroup key={0} float="left">