This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.

More Components

Alongside plain markdown, a handful of Starlight-style components live in src/components/mdx/ and can be imported into any .mdx post.

Card

Tabs

A code fence needs a blank line before and after it to be parsed as markdown instead of JSX text — Prettier doesn’t know that and will collapse those blank lines on save, so this block is wrapped in {/* prettier-ignore */} to keep its formatting intact.

npm install astro

pnpm add astro

yarn add astro

FileTree

Leave a blank line after <FileTree> so MDX parses the list as markdown, not JSX text.

Charts

Both charts take a shared labels array plus one or more series — each with its own data, an optional name (shown in the legend), and an optional color (falls back to a built-in palette starting with the site accent).

More Links

• MDX Syntax Documentation
• Astro Usage Documentation
• Note: Client Directives are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.