diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index c49a82d29b2653..89dfce8cac887f 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -50,6 +50,7 @@ const styles = theme => ({
     },
   },
   demo: {
+    margin: 'auto',
     borderRadius: theme.shape.borderRadius,
     backgroundColor:
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
@@ -233,6 +234,8 @@ class Demo extends React.Component {
     const sourceLanguage = demoData.codeVariant === CODE_VARIANTS.TS ? 'tsx' : 'jsx';
     const Frame = demoOptions.iframe ? DemoFrame : React.Fragment;
 
+    console.log('demoOptions', demoOptions)
+
     return (
       <div className={classes.root}>
         {demoOptions.hideHeader ? null : (
@@ -349,6 +352,9 @@ class Demo extends React.Component {
           })}
           onMouseEnter={this.handleDemoHover}
           onMouseLeave={this.handleDemoHover}
+          style={{
+            maxWidth: demoOptions.maxWidth,
+          }}
         >
           <Frame>
             <DemoComponent />
diff --git a/docs/src/pages/demos/app-bar/app-bar.md b/docs/src/pages/demos/app-bar/app-bar.md
index b7da82d67e4599..fc93a2f8bb860e 100644
--- a/docs/src/pages/demos/app-bar/app-bar.md
+++ b/docs/src/pages/demos/app-bar/app-bar.md
@@ -41,4 +41,4 @@ A side searchbar.
 
 ## Bottom App Bar
 
-{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true}}
+{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 600}}
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
index 8e31705fba52eb..a9dac96f675076 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
@@ -18,6 +18,7 @@ const useStyles = makeStyles(theme => ({
   },
   appFrame: {
     height: 356,
+    background: theme.palette.background.paper,
   },
   menuButton: {
     marginRight: theme.spacing(2),
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
index 9112a450218bf5..63bc8b1ab81f75 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   appFrame: {
     height: 356,
+    background: theme.palette.background.paper,
   },
   menuButton: {
     marginRight: theme.spacing(2),
diff --git a/docs/src/pages/demos/snackbars/TransitionsSnackbar.js b/docs/src/pages/demos/snackbars/TransitionsSnackbar.js
index 75b04f38d62c47..6d6dbc7b9bfbc2 100644
--- a/docs/src/pages/demos/snackbars/TransitionsSnackbar.js
+++ b/docs/src/pages/demos/snackbars/TransitionsSnackbar.js
@@ -3,11 +3,16 @@ import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import Fade from '@material-ui/core/Fade';
 import Slide from '@material-ui/core/Slide';
+import Grow from '@material-ui/core/Grow';
 
-function TransitionSlide(props) {
+function SlideTransition(props) {
   return <Slide {...props} direction="up" />;
 }
 
+function GrowTransition(props) {
+  return <Grow {...props} />;
+}
+
 function TransitionsSnackbar() {
   const [state, setState] = React.useState({
     open: false,
@@ -31,7 +36,8 @@ function TransitionsSnackbar() {
   return (
     <div>
       <Button onClick={handleClick(Fade)}>Fade Transition</Button>
-      <Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
+      <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
+      <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
       <Snackbar
         open={state.open}
         onClose={handleClose}
diff --git a/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx
index 096bcffb7ca1ab..70bd36793425d1 100644
--- a/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx
+++ b/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx
@@ -3,12 +3,17 @@ import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import Fade from '@material-ui/core/Fade';
 import Slide from '@material-ui/core/Slide';
+import Grow from '@material-ui/core/Grow';
 import { TransitionProps } from '@material-ui/core/transitions/transition';
 
-function TransitionSlide(props: TransitionProps) {
+function SlideTransition(props: TransitionProps) {
   return <Slide {...props} direction="up" />;
 }
 
+function GrowTransition(props: TransitionProps) {
+  return <Grow {...props} />;
+}
+
 function TransitionsSnackbar() {
   const [state, setState] = React.useState({
     open: false,
@@ -32,7 +37,8 @@ function TransitionsSnackbar() {
   return (
     <div>
       <Button onClick={handleClick(Fade)}>Fade Transition</Button>
-      <Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
+      <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
+      <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
       <Snackbar
         open={state.open}
         onClose={handleClose}
diff --git a/docs/src/pages/demos/snackbars/snackbars.md b/docs/src/pages/demos/snackbars/snackbars.md
index 54a15354718b7a..d58dc0e6cff3b6 100644
--- a/docs/src/pages/demos/snackbars/snackbars.md
+++ b/docs/src/pages/demos/snackbars/snackbars.md
@@ -56,7 +56,7 @@ When multiple snackbar updates are necessary, they should appear one at a time.
 
 Snackbars should appear above FABs (on mobile).
 
-{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js", "iframe": true}}
+{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 600}}
 
 ### Control Direction
 
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
index 19fa7e407a50b5..8dd707350e3cd1 100644
--- a/packages/material-ui/src/Slide/Slide.js
+++ b/packages/material-ui/src/Slide/Slide.js
@@ -70,7 +70,7 @@ export function setTranslateValue(props, node) {
 }
 
 /**
- * The Slide transition is used by the [Snackbar](/demos/snackbars/) component.
+ * The Slide transition is used by the [Drawer](/demos/drawers/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 class Slide extends React.Component {
diff --git a/pages/api/slide.md b/pages/api/slide.md
index 3bd989c0fece2a..5395d003bb44f6 100644
--- a/pages/api/slide.md
+++ b/pages/api/slide.md
@@ -12,7 +12,7 @@ filename: /packages/material-ui/src/Slide/Slide.js
 import Slide from '@material-ui/core/Slide';
 ```
 
-The Slide transition is used by the [Snackbar](/demos/snackbars/) component.
+The Slide transition is used by the [Drawer](/demos/drawers/) component.
 It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
 
 ## Props