Skip to content

🚀 Influence Docs Infra's 2025 roadmap! Participate in the latest Developer Survey

Demos

The different variants of demo containers we have in the docs.

Standard demo

"Standard" refers to when no background is explicitly defined. So, it renders the "outlined" background variant.

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

"bg": "outlined"

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

"bg": "inline"

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

"bg": true

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

"bg": gradient

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

"hideToolbar": true

This is an info alert — check it out!

This is a success alert — check it out!

"hideToolbar": true, "bg": true

This is an info alert — check it out!

This is a success alert — check it out!

"hideToolbar": true, "bg": "inline"

This is an info alert — check it out!

This is a success alert — check it out!

Multiple Tabs demo

Isolated demo

Isolated demos are disconnected from the page's theme and color scheme. They are like mini apps within the documentation.

When isolated: true is set to the demo options, the demo will get props for creating isolated demo. Those props should be passed to the ThemeProvider of the demo.

Basic theme

DemoIsolated.js

import { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';

function ModeToggle() {
  const { mode, setMode } = useColorScheme();
}

export default function DemoIsolated(props) {
  return (
    <ThemeProvider
      {...props}
      theme={createTheme({
        // ...custom theme
      })}
    >
      ...
    </ThemeProvider>
  );
}

Mode toggle with CSS variables

DemoModeToggle.js

import { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';

function ModeToggle() {
  const { mode, setMode } = useColorScheme();
}

export default function DemoModeToggle(props) {
  return (
    <ThemeProvider
      {...props}
      theme={createTheme({
        colorSchemes: { light: true, dark: true },
        cssVariables: {
          // required to make the demo isolated
          cssVarPrefix: props.cssVarPrefix,
          colorSchemeSelector: props.colorSchemeSelector || 'class',
        },
      })}
    >
      ...
    </ThemeProvider>
  );
}

Custom theme with CSS variables

Provide custom palettes to light and/or dark color schemes.

DemoModeToggleCustomTheme.js

import { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';

export default function DemoModeToggleCustomTheme(props) {
  const theme = createTheme({
    cssVariables: {
      cssVarPrefix: props.cssVarPrefix,
      colorSchemeSelector: props.colorSchemeSelector || 'class',
    },
    colorSchemes: {
      light: {
        palette: {
          // ...custom palette
        },
      },
      dark: {
        palette: {
          // ...custom palette
        },
      },
    },
  });
  return (
    <ThemeProvider {...props} theme={theme}>
      ...
    </ThemeProvider>
  );
}

Iframe demo

isolated: true can be used with iframe demos. The difference is that the node to attach the color scheme selector will be the html of the iframe instead of the demo container.