diff --git a/examples/material-ui-via-cdn/README.md b/examples/material-ui-via-cdn/README.md
index fc8062310ea7ec..acdba207e21fe4 100644
--- a/examples/material-ui-via-cdn/README.md
+++ b/examples/material-ui-via-cdn/README.md
@@ -12,7 +12,10 @@ cd material-ui-via-cdn
 Run:
 
 ```bash
+# React 19 or later
 open index.html
+# React 18
+open react-18-example.html
 ```
 
 ## The idea behind the example
diff --git a/examples/material-ui-via-cdn/index.html b/examples/material-ui-via-cdn/index.html
index 0b8d8398478268..1877ab42e28e10 100644
--- a/examples/material-ui-via-cdn/index.html
+++ b/examples/material-ui-via-cdn/index.html
@@ -18,8 +18,9 @@
         "imports": {
           "react": "https://esm.sh/react@latest",
           "react-dom": "https://esm.sh/react-dom@latest",
+          "react-dom/client": "https://esm.sh/react-dom@latest/client",
           "react/jsx-runtime": "https://esm.sh/react@latest/jsx-runtime",
-          "@mui/material": "https://esm.sh/@mui/material@latest?external=react"
+          "@mui/material": "https://esm.sh/@mui/material@latest?external=react,react-dom"
         }
       }
     </script>
@@ -31,7 +32,7 @@
     <!-- Usage -->
     <script type="text/babel" data-type="module">
       import * as React from 'react';
-      import { createRoot } from 'react-dom';
+      import { createRoot } from 'react-dom/client';
       import {
         colors,
         CssBaseline,
diff --git a/examples/material-ui-via-cdn/react-18-example.html b/examples/material-ui-via-cdn/react-18-example.html
new file mode 100644
index 00000000000000..f7276aabab136e
--- /dev/null
+++ b/examples/material-ui-via-cdn/react-18-example.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>My page</title>
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <!-- Fonts to support Material Design -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+    />
+    <!-- Icons to support Material Design -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@^18",
+          "react-dom": "https://esm.sh/react-dom@^18",
+          "react/jsx-runtime": "https://esm.sh/react@^18/jsx-runtime",
+          "@mui/material": "https://esm.sh/@mui/material@latest?external=react"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- Babel -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- Usage -->
+    <script type="text/babel" data-type="module">
+      import * as React from 'react';
+      import { createRoot } from 'react-dom';
+      import {
+        colors,
+        CssBaseline,
+        ThemeProvider,
+        Typography,
+        Container,
+        createTheme,
+        Box,
+        SvgIcon,
+        Link,
+      } from '@mui/material';
+
+      // Create a theme instance.
+      const theme = createTheme({
+        cssVariables: true,
+        palette: {
+          primary: {
+            main: '#556cd6',
+          },
+          secondary: {
+            main: '#19857b',
+          },
+          error: {
+            main: colors.red.A400,
+          },
+        },
+      });
+
+      function LightBulbIcon(props) {
+        return (
+          <SvgIcon {...props}>
+            <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+          </SvgIcon>
+        );
+      }
+
+      function ProTip() {
+        return (
+          <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
+            <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+            {'Pro tip: See more '}
+            <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>
+            {' in the Material UI documentation.'}
+          </Typography>
+        );
+      }
+
+      function Copyright() {
+        return (
+          <Typography variant="body2" color="text.secondary" align="center">
+            {'Copyright © '}
+            <Link color="inherit" href="https://mui.com/">
+              Your Website
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+          </Typography>
+        );
+      }
+
+      function App() {
+        return (
+          <Container maxWidth="sm">
+            <Box sx={{ my: 4 }}>
+              <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+                Material UI CDN example
+              </Typography>
+              <ProTip />
+              <Copyright />
+            </Box>
+          </Container>
+        );
+      }
+
+      const root = createRoot(document.getElementById('root'));
+      root.render(
+        <ThemeProvider theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <App />
+        </ThemeProvider>,
+      );
+    </script>
+  </body>
+</html>
