Using MDX

This theme shows how MDX can be used in Astro. MDX allows embedding UI components inside markdown content.

Example (code only)

Below is an example showing how you would import and use an Astro component inside an MDX file. This is shown as a code block and will not be executed.

import HeaderLink from '../../components/HeaderLink.astro';

<HeaderLink href="#" client:load>
  Embedded component in MDX
</HeaderLink>

Notes

• If you want to render interactive components in MDX, remember to use Astro client directives like client:load, client:idle, or client:visible.
• Keep MDX code blocks fenced to prevent the parser from attempting to interpret imports/JSX as top-level JS in the build step.