diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index c00d9a14bda35c..1df8ca92ad480d 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -19,6 +19,7 @@ import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
 import DemoLanguages from 'docs/src/modules/components/DemoLanguages';
 import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
+import getJsxPreview from 'docs/src/modules/utils/getJsxPreview';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
 
@@ -39,7 +40,6 @@ function addHiddenInput(form, name, value) {
 
 const styles = theme => ({
   root: {
-    position: 'relative',
     marginBottom: 40,
     marginLeft: -theme.spacing(2),
     marginRight: -theme.spacing(2),
@@ -50,6 +50,7 @@ const styles = theme => ({
     },
   },
   demo: {
+    position: 'relative',
     outline: 0,
     margin: 'auto',
     borderRadius: theme.shape.borderRadius,
@@ -77,6 +78,9 @@ const styles = theme => ({
     },
     justifyContent: 'space-between',
   },
+  headerButtons: {
+    margin: '2px 0',
+  },
   code: {
     display: 'none',
     padding: 0,
@@ -87,7 +91,6 @@ const styles = theme => ({
     },
     '& pre': {
       overflow: 'auto',
-      paddingTop: theme.spacing(5),
       margin: '0px !important',
       maxHeight: 1000,
     },
@@ -263,150 +266,155 @@ function Demo(props) {
 
   const match = useMediaQuery(theme => theme.breakpoints.up('sm'));
 
+  const jsx = getJsxPreview(demoData.raw || '', demoOptions.defaultCodeOpen);
+  const showPreview =
+    !demoOptions.hideHeader && jsx !== demoData.raw && jsx.split(/\n/).length <= 20;
+
+  let showCodeLabel;
+  if (codeOpen) {
+    showCodeLabel = showPreview ? t('hideFullSource') : t('hideSource');
+  } else {
+    showCodeLabel = showPreview ? t('showFullSource') : t('showSource');
+  }
+
   return (
     <div className={classes.root}>
+      <div
+        className={clsx(classes.demo, {
+          [classes.demoHiddenHeader]: demoOptions.hideHeader,
+        })}
+        tabIndex={-1}
+        onMouseEnter={handleDemoHover}
+        onMouseLeave={handleDemoHover}
+      >
+        <DemoSandboxed
+          style={demoSandboxedStyle}
+          component={DemoComponent}
+          iframe={demoOptions.iframe}
+          name={demoName}
+        />
+      </div>
       <div className={classes.anchorLink} id={`${demoName}.js`} />
       <div className={classes.anchorLink} id={`${demoName}.tsx`} />
       {demoOptions.hideHeader ? null : (
-        <div>
-          <div className={classes.header}>
-            <DemoLanguages
-              demo={demo}
-              codeOpen={codeOpen}
-              codeVariant={codeVariant}
-              gaEventCategory={gaCategory}
-              onLanguageClick={handleCodeLanguageClick}
-            />
-            <div>
-              <Tooltip
-                classes={{ popper: classes.tooltip }}
-                key={showSourceHint}
-                open={showSourceHint && match ? true : undefined}
-                PopperProps={{ disablePortal: true }}
-                title={codeOpen ? t('hideSource') : t('showSource')}
-                placement="top"
+        <div className={classes.header}>
+          <DemoLanguages
+            demo={demo}
+            codeOpen={codeOpen}
+            codeVariant={codeVariant}
+            gaEventCategory={gaCategory}
+            onLanguageClick={handleCodeLanguageClick}
+          />
+          <div className={classes.headerButtons}>
+            <Tooltip
+              classes={{ popper: classes.tooltip }}
+              key={showSourceHint}
+              open={showSourceHint && match ? true : undefined}
+              PopperProps={{ disablePortal: true }}
+              title={showCodeLabel}
+              placement="top"
+            >
+              <IconButton
+                aria-label={showCodeLabel}
+                data-ga-event-category={gaCategory}
+                data-ga-event-action="expand"
+                onClick={handleClickCodeOpen}
+                color={demoHovered ? 'primary' : 'default'}
               >
-                <IconButton
-                  aria-label={codeOpen ? t('hideSource') : t('showSource')}
-                  data-ga-event-category={gaCategory}
-                  data-ga-event-action="expand"
-                  onClick={handleClickCodeOpen}
-                  color={demoHovered ? 'primary' : 'default'}
-                >
-                  <CodeIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
+                <CodeIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip classes={{ popper: classes.tooltip }} title={t('viewGitHub')} placement="top">
+              <IconButton
+                aria-label={t('viewGitHub')}
+                data-ga-event-category={gaCategory}
+                data-ga-event-action="github"
+                href={demoData.githubLocation}
+                target="_blank"
+                rel="noopener nofollow"
+              >
+                <GitHubIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            {demoOptions.hideEditButton ? null : (
               <Tooltip
                 classes={{ popper: classes.tooltip }}
-                title={t('viewGitHub')}
+                title={t('codesandbox')}
                 placement="top"
               >
                 <IconButton
-                  aria-label={t('viewGitHub')}
+                  aria-label={t('codesandbox')}
                   data-ga-event-category={gaCategory}
-                  data-ga-event-action="github"
-                  href={demoData.githubLocation}
-                  target="_blank"
-                  rel="noopener nofollow"
+                  data-ga-event-action="codesandbox"
+                  onClick={handleClickCodeSandbox}
                 >
-                  <GitHubIcon fontSize="small" />
+                  <EditIcon fontSize="small" />
                 </IconButton>
               </Tooltip>
-              {demoOptions.hideEditButton ? null : (
-                <Tooltip
-                  classes={{ popper: classes.tooltip }}
-                  title={t('codesandbox')}
-                  placement="top"
-                >
-                  <IconButton
-                    aria-label={t('codesandbox')}
-                    data-ga-event-category={gaCategory}
-                    data-ga-event-action="codesandbox"
-                    onClick={handleClickCodeSandbox}
-                  >
-                    <EditIcon fontSize="small" />
-                  </IconButton>
-                </Tooltip>
-              )}
-              <IconButton
-                onClick={handleClickMore}
-                aria-owns={anchorEl ? 'demo-menu-more' : undefined}
-                aria-haspopup="true"
-                aria-label={t('seeMore')}
+            )}
+            <IconButton
+              onClick={handleClickMore}
+              aria-owns={anchorEl ? 'demo-menu-more' : undefined}
+              aria-haspopup="true"
+              aria-label={t('seeMore')}
+            >
+              <MoreVertIcon fontSize="small" />
+            </IconButton>
+            <Menu
+              id="demo-menu-more"
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={handleCloseMore}
+              getContentAnchorEl={null}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+            >
+              <MenuItem
+                data-ga-event-category={gaCategory}
+                data-ga-event-action="copy"
+                onClick={handleClickCopy}
               >
-                <MoreVertIcon fontSize="small" />
-              </IconButton>
-              <Menu
-                id="demo-menu-more"
-                anchorEl={anchorEl}
-                open={Boolean(anchorEl)}
-                onClose={handleCloseMore}
-                getContentAnchorEl={null}
-                anchorOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right',
-                }}
-              >
-                <MenuItem
-                  data-ga-event-category={gaCategory}
-                  data-ga-event-action="copy"
-                  onClick={handleClickCopy}
-                >
-                  {t('copySource')}
-                </MenuItem>
-                {demoOptions.hideEditButton ? null : (
-                  <MenuItem
-                    data-ga-event-category={gaCategory}
-                    data-ga-event-action="stackblitz"
-                    onClick={handleClickStackBlitz}
-                  >
-                    {t('stackblitz')}
-                  </MenuItem>
-                )}
-                <MenuItem
-                  data-ga-event-category={gaCategory}
-                  data-ga-event-action="copy-js-source-link"
-                  onClick={createHandleCodeSourceLink(`${demoName}.js`)}
-                >
-                  {t('copySourceLinkJS')}
-                </MenuItem>
+                {t('copySource')}
+              </MenuItem>
+              {demoOptions.hideEditButton ? null : (
                 <MenuItem
                   data-ga-event-category={gaCategory}
-                  data-ga-event-action="copy-ts-source-link"
-                  onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
+                  data-ga-event-action="stackblitz"
+                  onClick={handleClickStackBlitz}
                 >
-                  {t('copySourceLinkTS')}
+                  {t('stackblitz')}
                 </MenuItem>
-              </Menu>
-            </div>
+              )}
+              <MenuItem
+                data-ga-event-category={gaCategory}
+                data-ga-event-action="copy-js-source-link"
+                onClick={createHandleCodeSourceLink(`${demoName}.js`)}
+              >
+                {t('copySourceLinkJS')}
+              </MenuItem>
+              <MenuItem
+                data-ga-event-category={gaCategory}
+                data-ga-event-action="copy-ts-source-link"
+                onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
+              >
+                {t('copySourceLinkTS')}
+              </MenuItem>
+            </Menu>
           </div>
-          <Collapse in={codeOpen} unmountOnExit>
-            <MarkdownElement
-              className={classes.code}
-              text={`\`\`\`${demoData.sourceLanguage}\n${demoData.raw}\n\`\`\``}
-            />
-          </Collapse>
         </div>
       )}
-      <div
-        className={clsx(classes.demo, {
-          [classes.demoHiddenHeader]: demoOptions.hideHeader,
-        })}
-        tabIndex={-1}
-        onMouseEnter={handleDemoHover}
-        onMouseLeave={handleDemoHover}
-      >
-        <DemoSandboxed
-          style={demoSandboxedStyle}
-          component={DemoComponent}
-          iframe={demoOptions.iframe}
-          name={demoName}
+      <Collapse in={codeOpen || showPreview} unmountOnExit>
+        <MarkdownElement
+          className={classes.code}
+          text={`\`\`\`${demoData.sourceLanguage}\n${codeOpen ? demoData.raw : jsx}\n\`\`\``}
         />
-      </div>
+      </Collapse>
     </div>
   );
 }
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index d1db904a72181f..9a467e25b6deeb 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -192,6 +192,7 @@ function MarkdownDocs(props) {
             try {
               demoOptions = JSON.parse(`{${content}}`);
             } catch (err) {
+              console.error('JSON.parse fails with: ', `{${content}}`);
               console.error(err);
               return null;
             }
diff --git a/docs/src/modules/utils/getJsxPreview.js b/docs/src/modules/utils/getJsxPreview.js
new file mode 100644
index 00000000000000..5bb3e9ec0ad8ac
--- /dev/null
+++ b/docs/src/modules/utils/getJsxPreview.js
@@ -0,0 +1,28 @@
+export default function getJsxPreview(code, defaultCodeOpen) {
+  /* The regex matches the content of the return statement in the default export,
+   * stripping any wrapper divs:
+   *
+   * `export default.*`
+   * `\n  return (\n` or `\n  return `
+   * `    <div.*>\n` (optional)
+   *  everything until:
+   * `\n    </div>` (optional)
+   * `  );\n}` or `;\n}`
+   */
+  let jsx = code.match(
+    /export default .*(?:\n {2}return \(\n|\n {2}return )(?: {4}<div.*?>\n)?(.*?)(\n {4}<\/div>)?(\n {2}\);\n}|;\n})/s,
+  );
+  // Just the match, otherwise the full source if either no match or preview disabled,
+  // so as not to break the Collapse transition.
+  jsx = jsx && defaultCodeOpen !== false ? jsx[1] : code;
+
+  // Remove leading spaces from each line
+  return jsx.split(/\n/).reduce(
+    (acc, line) =>
+      `${acc}${line.slice(
+        // Number of leading spaces on the first line
+        jsx.match(/^ */)[0].length,
+      )}\n`,
+    '',
+  );
+}
diff --git a/docs/src/modules/utils/getJsxPreview.test.js b/docs/src/modules/utils/getJsxPreview.test.js
new file mode 100644
index 00000000000000..c65ab4573d9441
--- /dev/null
+++ b/docs/src/modules/utils/getJsxPreview.test.js
@@ -0,0 +1,94 @@
+import { expect } from 'chai';
+import getJsxPreview from './getJsxPreview';
+
+describe('getJsxPreview', () => {
+  it('should extract one-line a preview', () => {
+    expect(
+      getJsxPreview(
+        `
+import React from 'react';
+import Rating from '@material-ui/lab/Rating';
+
+export default function HalfRating() {
+  return <Rating name="half-rating" value={2.5} precision={0.5} />;
+}
+`,
+        true,
+      ),
+    ).to.equal(`<Rating name="half-rating" value={2.5} precision={0.5} />
+`);
+  });
+
+  it('should extract a multi-line preview', () => {
+    expect(
+      getJsxPreview(
+        `
+export default function UseWidth() {
+  return (
+    <ThemeProvider theme={theme}>
+      <MyComponent />
+    </ThemeProvider>
+  );
+}
+`,
+        true,
+      ),
+    ).to.equal(`<ThemeProvider theme={theme}>
+  <MyComponent />
+</ThemeProvider>
+`);
+  });
+
+  it('should exclude an outer div', () => {
+    expect(
+      getJsxPreview(
+        `
+export default function UseWidth() {
+  return (
+    <div className={classes.root}>
+      <MyComponent />
+    </div>
+  );
+}
+`,
+        true,
+      ),
+    ).to.equal(`<MyComponent />
+`);
+  });
+
+  it('should return all if no match', () => {
+    expect(
+      getJsxPreview(
+        `
+export function UseWidth() {
+  return ( <MyComponent />;
+}
+`,
+        true,
+      ),
+    ).to.equal(`
+export function UseWidth() {
+  return ( <MyComponent />;
+}
+
+`);
+  });
+  it('should return all if defaultCodeOpen is false', () => {
+    expect(
+      getJsxPreview(
+        `
+export default function UseWidth() {
+  return <MyComponent />;
+}
+`,
+        false,
+      ),
+    ).to.equal(`
+export default function UseWidth() {
+  return <MyComponent />;
+}
+
+`);
+  });
+});
diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md
index 6991d2cf66df61..f953af2bc14804 100644
--- a/docs/src/pages/components/buttons/buttons.md
+++ b/docs/src/pages/components/buttons/buttons.md
@@ -112,7 +112,7 @@ deselected, such as adding or removing a star to an item.
 Here are some examples of customizing the component. You can learn more about this in the
 [overrides documentation page](/customization/components/).
 
-{{"demo": "pages/components/buttons/CustomizedButtons.js"}}
+{{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}}
 
 👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/button).
 
diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md
index 8ef6857f786436..0da0421d271531 100644
--- a/docs/src/pages/components/checkboxes/checkboxes.md
+++ b/docs/src/pages/components/checkboxes/checkboxes.md
@@ -36,7 +36,7 @@ You can change the placement of the label:
 Here is an example of customizing the component. You can learn more about this in the
 [overrides documentation page](/customization/components/).
 
-{{"demo": "pages/components/checkboxes/CustomizedCheckbox.js"}}
+{{"demo": "pages/components/checkboxes/CustomizedCheckbox.js", "defaultCodeOpen": false}}
 
 ## When to use
 
diff --git a/docs/src/pages/components/container/container.md b/docs/src/pages/components/container/container.md
index 38fe5e4fb0953c..aeabd6d56138dc 100644
--- a/docs/src/pages/components/container/container.md
+++ b/docs/src/pages/components/container/container.md
@@ -13,19 +13,19 @@ While containers can be nested, most layouts do not require a nested container.
 
 A fluid container width is bounded by that `maxWidth` property value.
 
+{{"demo": "pages/components/container/SimpleContainer.js", "iframe": true, "defaultCodeOpen": false}}
+
 ```jsx
 <Container maxWidth="sm">
 ```
 
-{{"demo": "pages/components/container/SimpleContainer.js", "iframe": true}}
-
 ## Fixed
 
 If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the `fixed` property.
 The max-width matches the min-width of the current breakpoint.
 
+{{"demo": "pages/components/container/FixedContainer.js", "iframe": true, "defaultCodeOpen": false}}
+
 ```jsx
 <Container fixed>
 ```
-
-{{"demo": "pages/components/container/FixedContainer.js", "iframe": true}}
diff --git a/docs/src/pages/components/grid-list/grid-list.md b/docs/src/pages/components/grid-list/grid-list.md
index 595c5de12c0978..66a3f8a932c587 100644
--- a/docs/src/pages/components/grid-list/grid-list.md
+++ b/docs/src/pages/components/grid-list/grid-list.md
@@ -36,4 +36,4 @@ This example demonstrates "featured" tiles, using the `rows` and `cols` props to
 The tiles have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`.
 The secondary action `IconButton` is positioned on the left.
 
-{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
diff --git a/docs/src/pages/components/menus/MenuPopupState.js b/docs/src/pages/components/menus/MenuPopupState.js
index 58a4fed563a8d4..af8be74e5135d3 100644
--- a/docs/src/pages/components/menus/MenuPopupState.js
+++ b/docs/src/pages/components/menus/MenuPopupState.js
@@ -4,7 +4,7 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';
 
-function MenuPopupState() {
+export default function MenuPopupState() {
   return (
     <PopupState variant="popover" popupId="demo-popup-menu">
       {popupState => (
@@ -21,5 +21,3 @@ function MenuPopupState() {
     </PopupState>
   );
 }
-
-export default MenuPopupState;
diff --git a/docs/src/pages/components/modal/ServerModal.js b/docs/src/pages/components/modal/ServerModal.js
index c8105f837e8c5a..0a99b62fa43482 100644
--- a/docs/src/pages/components/modal/ServerModal.js
+++ b/docs/src/pages/components/modal/ServerModal.js
@@ -41,9 +41,7 @@ export default function ServerModal() {
       >
         <div className={classes.paper}>
           <h2 id="server-modal-title">Server-side modal</h2>
-          <p id="server-modal-description">
-            You can disable the JavaScript, you will still see me.
-          </p>
+          <p id="server-modal-description">If you disable JavaScript, you will still see me.</p>
         </div>
       </Modal>
     </div>
diff --git a/docs/src/pages/components/modal/ServerModal.tsx b/docs/src/pages/components/modal/ServerModal.tsx
index 73e944626fa853..c5eb2ea4c9e5b5 100644
--- a/docs/src/pages/components/modal/ServerModal.tsx
+++ b/docs/src/pages/components/modal/ServerModal.tsx
@@ -43,9 +43,7 @@ export default function ServerModal() {
       >
         <div className={classes.paper}>
           <h2 id="server-modal-title">Server-side modal</h2>
-          <p id="server-modal-description">
-            You can disable the JavaScript, you will still see me.
-          </p>
+          <p id="server-modal-description">If you disable JavaScript, you will still see me.</p>
         </div>
       </Modal>
     </div>
diff --git a/docs/src/pages/components/modal/SimpleModal.js b/docs/src/pages/components/modal/SimpleModal.js
index c8ced25df8d81d..dda7f99d687c18 100644
--- a/docs/src/pages/components/modal/SimpleModal.js
+++ b/docs/src/pages/components/modal/SimpleModal.js
@@ -44,7 +44,6 @@ export default function SimpleModal() {
 
   return (
     <div>
-      <p>Click to get the full Modal experience!</p>
       <button type="button" onClick={handleOpen}>
         Open Modal
       </button>
diff --git a/docs/src/pages/components/modal/SimpleModal.tsx b/docs/src/pages/components/modal/SimpleModal.tsx
index e3aa58c84ac7a4..3d33d45e676ab1 100644
--- a/docs/src/pages/components/modal/SimpleModal.tsx
+++ b/docs/src/pages/components/modal/SimpleModal.tsx
@@ -46,7 +46,6 @@ export default function SimpleModal() {
 
   return (
     <div>
-      <p>Click to get the full Modal experience!</p>
       <button type="button" onClick={handleOpen}>
         Open Modal
       </button>
diff --git a/docs/src/pages/components/paper/PaperSheet.js b/docs/src/pages/components/paper/PaperSheet.js
index 3874972b31ae02..8cb768be97aa17 100644
--- a/docs/src/pages/components/paper/PaperSheet.js
+++ b/docs/src/pages/components/paper/PaperSheet.js
@@ -13,15 +13,13 @@ export default function PaperSheet() {
   const classes = useStyles();
 
   return (
-    <div>
-      <Paper className={classes.root}>
-        <Typography variant="h5" component="h3">
-          This is a sheet of paper.
-        </Typography>
-        <Typography component="p">
-          Paper can be used to build surface or other elements for your application.
-        </Typography>
-      </Paper>
-    </div>
+    <Paper className={classes.root}>
+      <Typography variant="h5" component="h3">
+        This is a sheet of paper.
+      </Typography>
+      <Typography component="p">
+        Paper can be used to build surface or other elements for your application.
+      </Typography>
+    </Paper>
   );
 }
diff --git a/docs/src/pages/components/paper/PaperSheet.tsx b/docs/src/pages/components/paper/PaperSheet.tsx
index 2e9fe3d6732d3c..2efd7ae68e15c3 100644
--- a/docs/src/pages/components/paper/PaperSheet.tsx
+++ b/docs/src/pages/components/paper/PaperSheet.tsx
@@ -15,15 +15,13 @@ export default function PaperSheet() {
   const classes = useStyles();
 
   return (
-    <div>
-      <Paper className={classes.root}>
-        <Typography variant="h5" component="h3">
-          This is a sheet of paper.
-        </Typography>
-        <Typography component="p">
-          Paper can be used to build surface or other elements for your application.
-        </Typography>
-      </Paper>
-    </div>
+    <Paper className={classes.root}>
+      <Typography variant="h5" component="h3">
+        This is a sheet of paper.
+      </Typography>
+      <Typography component="p">
+        Paper can be used to build surface or other elements for your application.
+      </Typography>
+    </Paper>
   );
 }
diff --git a/docs/src/pages/components/progress/CircularDeterminate.js b/docs/src/pages/components/progress/CircularDeterminate.js
index 7f31ffacdbbdea..6909eb77cca151 100644
--- a/docs/src/pages/components/progress/CircularDeterminate.js
+++ b/docs/src/pages/components/progress/CircularDeterminate.js
@@ -3,8 +3,11 @@ import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles(theme => ({
-  progress: {
-    margin: theme.spacing(2),
+  root: {
+    display: 'flex',
+    '& > * + *': {
+      marginLeft: theme.spacing(2),
+    },
   },
 }));
 
@@ -25,14 +28,9 @@ export default function CircularDeterminate() {
   }, []);
 
   return (
-    <div>
-      <CircularProgress className={classes.progress} variant="determinate" value={progress} />
-      <CircularProgress
-        className={classes.progress}
-        variant="determinate"
-        value={progress}
-        color="secondary"
-      />
+    <div className={classes.root}>
+      <CircularProgress variant="determinate" value={progress} />
+      <CircularProgress variant="determinate" value={progress} color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/CircularDeterminate.tsx b/docs/src/pages/components/progress/CircularDeterminate.tsx
index a735f1d97c79ff..ccbfd5d2a2f1dd 100644
--- a/docs/src/pages/components/progress/CircularDeterminate.tsx
+++ b/docs/src/pages/components/progress/CircularDeterminate.tsx
@@ -4,8 +4,11 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    progress: {
-      margin: theme.spacing(2),
+    root: {
+      display: 'flex',
+      '& > * + *': {
+        marginLeft: theme.spacing(2),
+      },
     },
   }),
 );
@@ -27,14 +30,9 @@ export default function CircularDeterminate() {
   }, []);
 
   return (
-    <div>
-      <CircularProgress className={classes.progress} variant="determinate" value={progress} />
-      <CircularProgress
-        className={classes.progress}
-        variant="determinate"
-        value={progress}
-        color="secondary"
-      />
+    <div className={classes.root}>
+      <CircularProgress variant="determinate" value={progress} />
+      <CircularProgress variant="determinate" value={progress} color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/CircularIndeterminate.js b/docs/src/pages/components/progress/CircularIndeterminate.js
index 767a175ec15a48..48795595c95329 100644
--- a/docs/src/pages/components/progress/CircularIndeterminate.js
+++ b/docs/src/pages/components/progress/CircularIndeterminate.js
@@ -3,8 +3,11 @@ import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles(theme => ({
-  progress: {
-    margin: theme.spacing(2),
+  root: {
+    display: 'flex',
+    '& > * + *': {
+      marginLeft: theme.spacing(2),
+    },
   },
 }));
 
@@ -12,9 +15,9 @@ export default function CircularIndeterminate() {
   const classes = useStyles();
 
   return (
-    <div>
-      <CircularProgress className={classes.progress} />
-      <CircularProgress className={classes.progress} color="secondary" />
+    <div className={classes.root}>
+      <CircularProgress />
+      <CircularProgress color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/CircularIndeterminate.tsx b/docs/src/pages/components/progress/CircularIndeterminate.tsx
index 8c46ab27cbf7c6..3b9bcd4b5bb4e9 100644
--- a/docs/src/pages/components/progress/CircularIndeterminate.tsx
+++ b/docs/src/pages/components/progress/CircularIndeterminate.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    progress: {
-      margin: theme.spacing(2),
+    root: {
+      display: 'flex',
+      '& > * + *': {
+        marginLeft: theme.spacing(2),
+      },
     },
   }),
 );
@@ -14,9 +17,9 @@ export default function CircularIndeterminate() {
   const classes = useStyles();
 
   return (
-    <div>
-      <CircularProgress className={classes.progress} />
-      <CircularProgress className={classes.progress} color="secondary" />
+    <div className={classes.root}>
+      <CircularProgress />
+      <CircularProgress color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/CircularStatic.js b/docs/src/pages/components/progress/CircularStatic.js
index a20a0ac3f34b4c..d8a80e79d6616e 100644
--- a/docs/src/pages/components/progress/CircularStatic.js
+++ b/docs/src/pages/components/progress/CircularStatic.js
@@ -3,8 +3,11 @@ import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles(theme => ({
-  progress: {
-    margin: theme.spacing(2),
+  root: {
+    display: 'flex',
+    '& > * + *': {
+      marginLeft: theme.spacing(2),
+    },
   },
 }));
 
@@ -24,13 +27,13 @@ export default function CircularStatic() {
   }, []);
 
   return (
-    <div>
-      <CircularProgress className={classes.progress} variant="static" value={5} />
-      <CircularProgress className={classes.progress} variant="static" value={25} />
-      <CircularProgress className={classes.progress} variant="static" value={50} />
-      <CircularProgress className={classes.progress} variant="static" value={75} />
-      <CircularProgress className={classes.progress} variant="static" value={100} />
-      <CircularProgress className={classes.progress} variant="static" value={completed} />
+    <div className={classes.root}>
+      <CircularProgress variant="static" value={5} />
+      <CircularProgress variant="static" value={25} />
+      <CircularProgress variant="static" value={50} />
+      <CircularProgress variant="static" value={75} />
+      <CircularProgress variant="static" value={100} />
+      <CircularProgress variant="static" value={completed} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/CircularStatic.tsx b/docs/src/pages/components/progress/CircularStatic.tsx
index d0bd994a5c5eff..822f175feb5945 100644
--- a/docs/src/pages/components/progress/CircularStatic.tsx
+++ b/docs/src/pages/components/progress/CircularStatic.tsx
@@ -4,8 +4,11 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    progress: {
-      margin: theme.spacing(2),
+    root: {
+      display: 'flex',
+      '& > * + *': {
+        marginLeft: theme.spacing(2),
+      },
     },
   }),
 );
@@ -26,13 +29,13 @@ export default function CircularStatic() {
   }, []);
 
   return (
-    <div>
-      <CircularProgress className={classes.progress} variant="static" value={5} />
-      <CircularProgress className={classes.progress} variant="static" value={25} />
-      <CircularProgress className={classes.progress} variant="static" value={50} />
-      <CircularProgress className={classes.progress} variant="static" value={75} />
-      <CircularProgress className={classes.progress} variant="static" value={100} />
-      <CircularProgress className={classes.progress} variant="static" value={completed} />
+    <div className={classes.root}>
+      <CircularProgress variant="static" value={5} />
+      <CircularProgress variant="static" value={25} />
+      <CircularProgress variant="static" value={50} />
+      <CircularProgress variant="static" value={75} />
+      <CircularProgress variant="static" value={100} />
+      <CircularProgress variant="static" value={completed} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/LinearBuffer.js b/docs/src/pages/components/progress/LinearBuffer.js
index ee82c5526c036c..138dc15baac151 100644
--- a/docs/src/pages/components/progress/LinearBuffer.js
+++ b/docs/src/pages/components/progress/LinearBuffer.js
@@ -2,11 +2,14 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
-    flexGrow: 1,
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
   },
-});
+}));
 
 export default function LinearBuffer() {
   const classes = useStyles();
@@ -42,8 +45,7 @@ export default function LinearBuffer() {
   return (
     <div className={classes.root}>
       <LinearProgress variant="buffer" value={completed} valueBuffer={buffer} />
-      <br />
-      <LinearProgress color="secondary" variant="buffer" value={completed} valueBuffer={buffer} />
+      <LinearProgress variant="buffer" value={completed} valueBuffer={buffer} color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/LinearBuffer.tsx b/docs/src/pages/components/progress/LinearBuffer.tsx
index ee82c5526c036c..12419fa05e4f56 100644
--- a/docs/src/pages/components/progress/LinearBuffer.tsx
+++ b/docs/src/pages/components/progress/LinearBuffer.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const useStyles = makeStyles({
-  root: {
-    flexGrow: 1,
-  },
-});
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
 
 export default function LinearBuffer() {
   const classes = useStyles();
@@ -42,8 +47,7 @@ export default function LinearBuffer() {
   return (
     <div className={classes.root}>
       <LinearProgress variant="buffer" value={completed} valueBuffer={buffer} />
-      <br />
-      <LinearProgress color="secondary" variant="buffer" value={completed} valueBuffer={buffer} />
+      <LinearProgress variant="buffer" value={completed} valueBuffer={buffer} color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/LinearDeterminate.js b/docs/src/pages/components/progress/LinearDeterminate.js
index 315bdfb71da40e..dbb52c7ebe9684 100644
--- a/docs/src/pages/components/progress/LinearDeterminate.js
+++ b/docs/src/pages/components/progress/LinearDeterminate.js
@@ -2,11 +2,14 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
-    flexGrow: 1,
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
   },
-});
+}));
 
 export default function LinearDeterminate() {
   const classes = useStyles();
@@ -32,8 +35,7 @@ export default function LinearDeterminate() {
   return (
     <div className={classes.root}>
       <LinearProgress variant="determinate" value={completed} />
-      <br />
-      <LinearProgress color="secondary" variant="determinate" value={completed} />
+      <LinearProgress variant="determinate" value={completed} color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/LinearDeterminate.tsx b/docs/src/pages/components/progress/LinearDeterminate.tsx
index 315bdfb71da40e..64d74b1ebecf17 100644
--- a/docs/src/pages/components/progress/LinearDeterminate.tsx
+++ b/docs/src/pages/components/progress/LinearDeterminate.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const useStyles = makeStyles({
-  root: {
-    flexGrow: 1,
-  },
-});
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
 
 export default function LinearDeterminate() {
   const classes = useStyles();
@@ -32,8 +37,7 @@ export default function LinearDeterminate() {
   return (
     <div className={classes.root}>
       <LinearProgress variant="determinate" value={completed} />
-      <br />
-      <LinearProgress color="secondary" variant="determinate" value={completed} />
+      <LinearProgress variant="determinate" value={completed} color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/LinearIndeterminate.js b/docs/src/pages/components/progress/LinearIndeterminate.js
index 4acd3995aa7e78..c4216e376f28b3 100644
--- a/docs/src/pages/components/progress/LinearIndeterminate.js
+++ b/docs/src/pages/components/progress/LinearIndeterminate.js
@@ -2,11 +2,14 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
-    flexGrow: 1,
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
   },
-});
+}));
 
 export default function LinearIndeterminate() {
   const classes = useStyles();
@@ -14,7 +17,6 @@ export default function LinearIndeterminate() {
   return (
     <div className={classes.root}>
       <LinearProgress />
-      <br />
       <LinearProgress color="secondary" />
     </div>
   );
diff --git a/docs/src/pages/components/progress/LinearIndeterminate.tsx b/docs/src/pages/components/progress/LinearIndeterminate.tsx
index 4acd3995aa7e78..7ba18e6ed286ba 100644
--- a/docs/src/pages/components/progress/LinearIndeterminate.tsx
+++ b/docs/src/pages/components/progress/LinearIndeterminate.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const useStyles = makeStyles({
-  root: {
-    flexGrow: 1,
-  },
-});
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
 
 export default function LinearIndeterminate() {
   const classes = useStyles();
@@ -14,7 +19,6 @@ export default function LinearIndeterminate() {
   return (
     <div className={classes.root}>
       <LinearProgress />
-      <br />
       <LinearProgress color="secondary" />
     </div>
   );
diff --git a/docs/src/pages/components/progress/LinearQuery.js b/docs/src/pages/components/progress/LinearQuery.js
index 63f779f05d51f7..cbe1c3682b3289 100644
--- a/docs/src/pages/components/progress/LinearQuery.js
+++ b/docs/src/pages/components/progress/LinearQuery.js
@@ -2,11 +2,14 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
-    flexGrow: 1,
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
   },
-});
+}));
 
 export default function LinearQuery() {
   const classes = useStyles();
@@ -14,8 +17,7 @@ export default function LinearQuery() {
   return (
     <div className={classes.root}>
       <LinearProgress variant="query" />
-      <br />
-      <LinearProgress color="secondary" variant="query" />
+      <LinearProgress variant="query" color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/LinearQuery.tsx b/docs/src/pages/components/progress/LinearQuery.tsx
index 63f779f05d51f7..ad7dc127b1cc78 100644
--- a/docs/src/pages/components/progress/LinearQuery.tsx
+++ b/docs/src/pages/components/progress/LinearQuery.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const useStyles = makeStyles({
-  root: {
-    flexGrow: 1,
-  },
-});
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
 
 export default function LinearQuery() {
   const classes = useStyles();
@@ -14,8 +19,7 @@ export default function LinearQuery() {
   return (
     <div className={classes.root}>
       <LinearProgress variant="query" />
-      <br />
-      <LinearProgress color="secondary" variant="query" />
+      <LinearProgress variant="query" color="secondary" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/progress/progress.md b/docs/src/pages/components/progress/progress.md
index 903b7d6217f5b9..0ab13ab58b3395 100644
--- a/docs/src/pages/components/progress/progress.md
+++ b/docs/src/pages/components/progress/progress.md
@@ -86,7 +86,7 @@ function Progress(props) {
 Here are some examples of customizing the component. You can learn more about this in the
 [overrides documentation page](/customization/components/).
 
-{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
+{{"demo": "pages/components/progress/CustomizedProgressBars.js", "defaultCodeOpen": false}}
 
 ## Delaying appearance
 
diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js
index baa03a48add450..0b20c606ead481 100644
--- a/docs/src/pages/components/rating/HalfRating.js
+++ b/docs/src/pages/components/rating/HalfRating.js
@@ -2,9 +2,5 @@ import React from 'react';
 import Rating from '@material-ui/lab/Rating';
 
 export default function HalfRating() {
-  return (
-    <div>
-      <Rating name="half-rating" value={2.5} precision={0.5} />
-    </div>
-  );
+  return <Rating name="half-rating" value={2.5} precision={0.5} />;
 }
diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
index baa03a48add450..0b20c606ead481 100644
--- a/docs/src/pages/components/rating/HalfRating.tsx
+++ b/docs/src/pages/components/rating/HalfRating.tsx
@@ -2,9 +2,5 @@ import React from 'react';
 import Rating from '@material-ui/lab/Rating';
 
 export default function HalfRating() {
-  return (
-    <div>
-      <Rating name="half-rating" value={2.5} precision={0.5} />
-    </div>
-  );
+  return <Rating name="half-rating" value={2.5} precision={0.5} />;
 }
diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md
index 6f6fcfea27a388..837d124e8c3ae2 100644
--- a/docs/src/pages/components/skeleton/skeleton.md
+++ b/docs/src/pages/components/skeleton/skeleton.md
@@ -22,8 +22,8 @@ For instance:
 
 ## YouTube example
 
-{{"demo": "pages/components/skeleton/YouTube.js"}}
+{{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}}
 
 ## Facebook example
 
-{{"demo": "pages/components/skeleton/Facebook.js"}}
+{{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false}}
diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md
index ddbc6b610d5e25..fe249aa930ffc3 100644
--- a/docs/src/pages/components/snackbars/snackbars.md
+++ b/docs/src/pages/components/snackbars/snackbars.md
@@ -80,7 +80,7 @@ We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack
 notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them).
 It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification).
 
-{{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
+{{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}}
 
 ## Accessibility
 
diff --git a/docs/src/pages/components/use-media-query/use-media-query.md b/docs/src/pages/components/use-media-query/use-media-query.md
index 3fedc407946241..f93671fb85e66d 100644
--- a/docs/src/pages/components/use-media-query/use-media-query.md
+++ b/docs/src/pages/components/use-media-query/use-media-query.md
@@ -38,7 +38,7 @@ function MyComponent() {
 }
 ```
 
-{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
+{{"demo": "pages/components/use-media-query/ThemeHelper.js", "defaultCodeOpen": false}}
 
 Alternatively, you can use a callback function, accepting the theme as a first argument:
 
diff --git a/docs/src/pages/system/borders/borders.md b/docs/src/pages/system/borders/borders.md
index 179e3840c81e98..27f3e2a133a23c 100644
--- a/docs/src/pages/system/borders/borders.md
+++ b/docs/src/pages/system/borders/borders.md
@@ -8,6 +8,8 @@ Use border utilities to add or remove an element’s borders. Choose from all bo
 
 ### Additive
 
+{{"demo": "pages/system/borders/BorderAdditive.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box border={1}>…
 <Box borderTop={1}>…
@@ -16,10 +18,10 @@ Use border utilities to add or remove an element’s borders. Choose from all bo
 <Box borderLeft={1}>…
 ```
 
-{{"demo": "pages/system/borders/BorderAdditive.js"}}
-
 ### Subtractive
 
+{{"demo": "pages/system/borders/BorderSubtractive.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box border={0}>…
 <Box borderTop={0}>…
@@ -28,10 +30,10 @@ Use border utilities to add or remove an element’s borders. Choose from all bo
 <Box borderLeft={0}>…
 ```
 
-{{"demo": "pages/system/borders/BorderSubtractive.js"}}
-
 ## Border color
 
+{{"demo": "pages/system/borders/BorderColor.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box borderColor="primary.main">…
 <Box borderColor="secondary.main">…
@@ -40,18 +42,16 @@ Use border utilities to add or remove an element’s borders. Choose from all bo
 <Box borderColor="text.primary">…
 ```
 
-{{"demo": "pages/system/borders/BorderColor.js"}}
-
 ## Border-radius
 
+{{"demo": "pages/system/borders/BorderRadius.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box borderRadius="50%">…
 <Box borderRadius="borderRadius">…
 <Box borderRadius={16}>…
 ```
 
-{{"demo": "pages/system/borders/BorderRadius.js"}}
-
 ## API
 
 ```js
diff --git a/docs/src/pages/system/display/display.md b/docs/src/pages/system/display/display.md
index a4173807131922..d2e9d20c8efd61 100644
--- a/docs/src/pages/system/display/display.md
+++ b/docs/src/pages/system/display/display.md
@@ -4,20 +4,24 @@
 
 ## Examples
 
+### Inline
+
+{{"demo": "pages/system/display/Inline.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box component="div" display="inline">inline</Box>
 <Box component="div" display="inline">inline</Box>
 ```
 
-{{"demo": "pages/system/display/Inline.js"}}
+### Block
+
+{{"demo": "pages/system/display/Block.js", "defaultCodeOpen": false}}
 
 ```jsx
 <Box component="span" display="block">block</Box>
 <Box component="span" display="block">block</Box>
 ```
 
-{{"demo": "pages/system/display/Block.js"}}
-
 ## Hiding elements
 
 For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
@@ -36,6 +40,7 @@ For faster mobile-friendly development, use responsive display classes for showi
 | Visible only on lg  | `display={{ xs: 'none', lg: 'block', xl: 'none' }}` |
 | Visible only on xl  | `display={{ xs: 'none', xl: 'block' }}` |
 
+{{"demo": "pages/system/display/Hiding.js", "defaultCodeOpen": false}}
 
 ```jsx
 <Box display={{ xs: 'block', md: 'none' }}>
@@ -46,10 +51,10 @@ For faster mobile-friendly development, use responsive display classes for showi
 </Box>
 ```
 
-{{"demo": "pages/system/display/Hiding.js"}}
-
 ## Display in print
 
+{{"demo": "pages/system/display/Print.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box display="block" displayPrint="none">
   Screen Only (Hide on print only)
@@ -59,10 +64,10 @@ For faster mobile-friendly development, use responsive display classes for showi
 </Box>
 ```
 
-{{"demo": "pages/system/display/Print.js"}}
-
 ## Overflow
 
+{{"demo": "pages/system/display/Overflow.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box component="div" overflow="hidden">
   Overflow Hidden
@@ -72,10 +77,10 @@ For faster mobile-friendly development, use responsive display classes for showi
 </Box>
 ```
 
-{{"demo": "pages/system/display/Overflow.js"}}
-
 ## Text Overflow
 
+{{"demo": "pages/system/display/TextOverflow.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box component="div" textOverflow="clip">
   Text Overflow Clip
@@ -85,10 +90,10 @@ For faster mobile-friendly development, use responsive display classes for showi
 </Box>
 ```
 
-{{"demo": "pages/system/display/TextOverflow.js"}}
-
 ## Visibility
 
+{{"demo": "pages/system/display/Visibility.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box component="div" visibility="visible">
   Visibility Visible
@@ -98,10 +103,10 @@ For faster mobile-friendly development, use responsive display classes for showi
 </Box>
 ```
 
-{{"demo": "pages/system/display/Visibility.js"}}
-
 ## White Space
 
+{{"demo": "pages/system/display/WhiteSpace.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box component="div" whiteSpace="nowrap">
   White Space Nowrap
@@ -111,8 +116,6 @@ For faster mobile-friendly development, use responsive display classes for showi
 </Box>
 ```
 
-{{"demo": "pages/system/display/WhiteSpace.js"}}
-
 ## API
 
 ```js
diff --git a/docs/src/pages/system/flexbox/flexbox.md b/docs/src/pages/system/flexbox/flexbox.md
index e91c894f56815c..288ca334187c2b 100644
--- a/docs/src/pages/system/flexbox/flexbox.md
+++ b/docs/src/pages/system/flexbox/flexbox.md
@@ -8,101 +8,101 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 
 ### display
 
+{{"demo": "pages/system/flexbox/Display.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box display="flex">…
 ```
 
-{{"demo": "pages/system/flexbox/Display.js"}}
-
 ### flex-direction
 
+{{"demo": "pages/system/flexbox/FlexDirection.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box flexDirection="row">…
 <Box flexDirection="row-reverse">…
 ```
 
-{{"demo": "pages/system/flexbox/FlexDirection.js"}}
-
 ### flex-wrap
 
+{{"demo": "pages/system/flexbox/FlexWrap.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box flexWrap="nowrap">…
 <Box flexWrap="wrap">…
 ```
 
-{{"demo": "pages/system/flexbox/FlexWrap.js"}}
-
 ### justify-content
 
+{{"demo": "pages/system/flexbox/JustifyContent.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box justifyContent="flex-start">…
 <Box justifyContent="flex-end">…
 <Box justifyContent="center">…
 ```
 
-{{"demo": "pages/system/flexbox/JustifyContent.js"}}
-
 ### align-items
 
+{{"demo": "pages/system/flexbox/AlignItems.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box alignItems="flex-start">…
 <Box alignItems="flex-end">…
 <Box alignItems="center">…
 ```
 
-{{"demo": "pages/system/flexbox/AlignItems.js"}}
-
 ### align-content
 
+{{"demo": "pages/system/flexbox/AlignContent.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box alignContent="flex-start">…
 <Box alignContent="flex-end">…
 ```
 
-{{"demo": "pages/system/flexbox/AlignContent.js"}}
-
 ## Properties for the Children
 
 ### order
 
+{{"demo": "pages/system/flexbox/Order.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box order={2}>Item 1</Box>
 <Box order={3}>Item 2</Box>
 <Box order={1}>Item 3</Box>
 ```
 
-{{"demo": "pages/system/flexbox/Order.js"}}
-
 ### flex-grow
 
+{{"demo": "pages/system/flexbox/FlexGrow.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box flexGrow={1}>Item 1</Box>
 <Box>Item 2</Box>
 <Box>Item 3</Box>
 ```
 
-{{"demo": "pages/system/flexbox/FlexGrow.js"}}
-
 ### flex-shrink
 
+{{"demo": "pages/system/flexbox/FlexShrink.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box width="100%">Item 1</Box>
 <Box flexShrink={1}>Item 2</Box>
 <Box flexShrink={0}>Item 3</Box>
 ```
 
-{{"demo": "pages/system/flexbox/FlexShrink.js"}}
-
 ### align-self
 
+{{"demo": "pages/system/flexbox/AlignSelf.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box>Item 1</Box>
 <Box alignSelf="flex-end">Item 2</Box>
 <Box>Item 3</Box>
 ```
 
-{{"demo": "pages/system/flexbox/AlignSelf.js"}}
-
 ## API
 
 ```js
diff --git a/docs/src/pages/system/palette/palette.md b/docs/src/pages/system/palette/palette.md
index caba98453559c5..056870e6988bf7 100644
--- a/docs/src/pages/system/palette/palette.md
+++ b/docs/src/pages/system/palette/palette.md
@@ -4,6 +4,8 @@
 
 ## Color
 
+{{"demo": "pages/system/palette/Color.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box color="primary.main">…
 <Box color="secondary.main">…
@@ -14,10 +16,10 @@
 <Box color="text.hint">…
 ```
 
-{{"demo": "pages/system/palette/Color.js"}}
-
 ## Background color
 
+{{"demo": "pages/system/palette/BackgroundColor.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box bgcolor="primary.main">…
 <Box bgcolor="secondary.main">…
@@ -28,8 +30,6 @@
 <Box bgcolor="text.hint">…
 ```
 
-{{"demo": "pages/system/palette/BackgroundColor.js"}}
-
 ## API
 
 ```js
diff --git a/docs/src/pages/system/positions/positions.md b/docs/src/pages/system/positions/positions.md
index f053acdf00ca7c..02c1afe73463c9 100644
--- a/docs/src/pages/system/positions/positions.md
+++ b/docs/src/pages/system/positions/positions.md
@@ -4,13 +4,13 @@
 
 ## z-index
 
+{{"demo": "pages/system/positions/ZIndex.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box zIndex="tooltip">
 <Box zIndex="modal">
 ```
 
-{{"demo": "pages/system/positions/ZIndex.js"}}
-
 ## API
 
 ```js
diff --git a/docs/src/pages/system/shadows/shadows.md b/docs/src/pages/system/shadows/shadows.md
index 8d4e7ae3195b8b..df15399fb3d09b 100644
--- a/docs/src/pages/system/shadows/shadows.md
+++ b/docs/src/pages/system/shadows/shadows.md
@@ -4,6 +4,8 @@
 
 ## Example
 
+{{"demo": "pages/system/shadows/Demo.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box boxShadow={0}>…
 <Box boxShadow={1}>…
@@ -11,8 +13,6 @@
 <Box boxShadow={3}>…
 ```
 
-{{"demo": "pages/system/shadows/Demo.js"}}
-
 ## API
 
 ```js
diff --git a/docs/src/pages/system/sizing/sizing.md b/docs/src/pages/system/sizing/sizing.md
index 1716ee0b3c9d9b..1573143f940b25 100644
--- a/docs/src/pages/system/sizing/sizing.md
+++ b/docs/src/pages/system/sizing/sizing.md
@@ -6,6 +6,8 @@
 
 The sizing style functions support different property input type:
 
+{{"demo": "pages/system/sizing/Values.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box width={1/4}> // Numbers in [0,1] are multiplied by 100 and converted to % values.
 <Box width={300}> // Numbers are converted to pixel values.
@@ -13,10 +15,10 @@ The sizing style functions support different property input type:
 <Box width={1}>   // 100%
 ```
 
-{{"demo": "pages/system/sizing/Values.js"}}
-
 ## Width
 
+{{"demo": "pages/system/sizing/Width.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box width="25%">…
 <Box width="50%">…
@@ -25,10 +27,10 @@ The sizing style functions support different property input type:
 <Box width="auto">…
 ```
 
-{{"demo": "pages/system/sizing/Width.js"}}
-
 ## Height
 
+{{"demo": "pages/system/sizing/Height.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box height="25%">…
 <Box height="50%">…
@@ -36,8 +38,6 @@ The sizing style functions support different property input type:
 <Box height="100%">…
 ```
 
-{{"demo": "pages/system/sizing/Height.js"}}
-
 ## API
 
 ```js
diff --git a/docs/src/pages/system/spacing/spacing.md b/docs/src/pages/system/spacing/spacing.md
index ea7b033151f3c2..36d783a661bab9 100644
--- a/docs/src/pages/system/spacing/spacing.md
+++ b/docs/src/pages/system/spacing/spacing.md
@@ -70,22 +70,22 @@ const theme = {
 
 ## Example
 
+{{"demo": "pages/system/spacing/Demo.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box p={1}>…
 <Box m={1}>…
 <Box p={2}>…
 ```
 
-{{"demo": "pages/system/spacing/Demo.js"}}
-
 ## Horizontal centering
 
+{{"demo": "pages/system/spacing/HorizontalCentering.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box mx="auto">…
 ```
 
-{{"demo": "pages/system/spacing/HorizontalCentering.js"}}
-
 ## API
 
 ```js
diff --git a/docs/src/pages/system/typography/typography.md b/docs/src/pages/system/typography/typography.md
index fa9202747be56d..177d9797755932 100644
--- a/docs/src/pages/system/typography/typography.md
+++ b/docs/src/pages/system/typography/typography.md
@@ -4,16 +4,18 @@
 
 ## Text alignment
 
+{{"demo": "pages/system/typography/TextAlignment.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box textAlign="left">…
 <Box textAlign="center">…
 <Box textAlign="right">…
 ```
 
-{{"demo": "pages/system/typography/TextAlignment.js"}}
-
 ## Font weight
 
+{{"demo": "pages/system/typography/FontWeight.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box fontWeight="fontWeightLight">…
 <Box fontWeight="fontWeightRegular">…
@@ -22,55 +24,53 @@
 <Box fontWeight="fontWeightBold">…
 ```
 
-{{"demo": "pages/system/typography/FontWeight.js"}}
-
 ## Font size
 
+{{"demo": "pages/system/typography/FontSize.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box fontSize="fontSize">…
 <Box fontSize="h6.fontSize">…
 <Box fontSize={16}>…
 ```
 
-{{"demo": "pages/system/typography/FontSize.js"}}
-
 ## Font Style
 
+{{"demo": "pages/system/typography/FontStyle.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box fontStyle="normal">…
 <Box fontStyle="italic">…
 <Box fontStyle="oblique">…
 ```
 
-{{"demo": "pages/system/typography/FontStyle.js"}}
-
 ## Font family
 
+{{"demo": "pages/system/typography/FontFamily.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box fontFamily="fontFamily">…
 <Box fontFamily="Monospace">…
 ```
 
-{{"demo": "pages/system/typography/FontFamily.js"}}
-
 ## Letter Spacing
 
+{{"demo": "pages/system/typography/LetterSpacing.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box letterSpacing={6}>…
 <Box letterSpacing={10}>…
 ```
 
-{{"demo": "pages/system/typography/LetterSpacing.js"}}
-
 ## Line Height
 
+{{"demo": "pages/system/typography/LineHeight.js", "defaultCodeOpen": false}}
+
 ```jsx
 <Box lineHeight="normal">…
 <Box lineHeight={10}>…
 ```
 
-{{"demo": "pages/system/typography/LineHeight.js"}}
-
 ## API
 
 ```js
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index d27764d1b69198..d92bc76a07992e 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -57,6 +57,8 @@
   "expandAll": "Expand all",
   "showSource": "Show the source",
   "hideSource": "Hide the source",
+  "showFullSource": "Show the full source",
+  "hideFullSource": "Hide the full source",
   "viewGitHub": "View the source on GitHub",
   "codesandbox": "Edit in CodeSandbox",
   "seeMore": "See more",