MDX Components

Callouts, Tabs, and Steps available in all .mdx files.

Callouts

Note

This is a note callout. Great for extra context.

Tip

This is a tip callout. Highlight best practices here.

Warning

This is a warning callout. Use before risky steps.

Danger

This is a danger callout. Reserved for destructive actions.

pnpm add @astrojs/mdx

npm install @astrojs/mdx

yarn add @astrojs/mdx

Install the package

Run the install command for your package manager (see Tabs above).

Add the integration

Import and add mdx() to the integrations array in astro.config.mjs.

Write .mdx files

Rename any .md file to .mdx and start importing components at the top.

Fenced code blocks use Shiki — no extra setup needed.

import { Callout } from "@/components/mdx"

// Use in any .mdx file

Component	Purpose
`Callout`	Note / tip / warning / danger blocks
`Tabs`	Tabbed content panels
`Steps`	Numbered step-by-step guide