Embedding React in MDX

Every page in MDX Docs is an .mdx file, so you can import and render any React or Material UI component right inside your Markdown — no special configuration required. This is the foundation the other examples build on.

Example

This Alert is a live React component rendered inside Markdown.


mdx
import Alert from "@mui/material/Alert";

<Alert severity="success">
  This Alert is a live React component rendered inside Markdown.
</Alert>

Import the component at the top of the page, then use it anywhere in your content. The same approach works for your own components — see Documentation Components for reusable examples you can copy.