MDX Component Showcase
Complete reference for all available MDX components with syntax examples and rendered output

Patrick Prunty
Headings
# Heading 1## Heading 2### Heading 3#### Heading 4##### Heading 5###### Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text Formatting
**Bold text***Italic text*`inline code`Regular text with [links](https://example.com)
Bold text
Italic text
inline code
Regular text with links
Lists
## Unordered Lists- First item- Second item- Nested item- Another nested item- Third item## Ordered Lists1. First numbered item2. Second numbered item1. Nested numbered item2. Another nested numbered item3. Third numbered item
Unordered Lists
- First item
- Second item
- Nested item
- Another nested item
- Third item
Ordered Lists
- First numbered item
- Second numbered item
- Nested numbered item
- Another nested numbered item
- Third numbered item
Blockquotes
> This is a blockquote with important information.> It can span multiple lines and maintains formatting.
This is a blockquote with important information. It can span multiple lines and maintains formatting.
Code Blocks
```javascriptfunction hello(name) {return `Hello, ${name}!`;}console.log(hello("World"));\```
function hello(name) {return `Hello, ${name}!`;}console.log(hello("World"));
```typescriptinterface User {id: number;name: string;email: string;}const user: User = {id: 1,name: "John Doe",email: "john@example.com"};\```
interface User {id: number;name: string;email: string;}const user: User = {id: 1,name: "John Doe",email: "john@example.com"};
Tables
| Component | Type | Features ||-----------|------|----------|| MP3 | Audio | Lazy loading, controls || MP4 | Video | Responsive, controls || Spotify | Embed | Tracks, playlists |
Component | Type | Features |
---|---|---|
MP3 | Audio | Lazy loading, controls |
MP4 | Video | Responsive, controls |
Spotify | Embed | Tracks, playlists |
Horizontal Rule
---
Callout
<Callout>💡 **Tip**: This is a callout component for highlighting important information.</Callout>
💡 Tip: This is a callout component for highlighting important information.
Alert
<Alert><AlertTitle>Important Notice</AlertTitle><AlertDescription>This alert component displays important information with a title and description.</AlertDescription></Alert>
Important Notice
This alert component displays important information with a title and description.
Admonitions
<Admonition type="note" title="Note">This is a note admonition with additional context.</Admonition><Admonition type="tip" title="Pro Tip">This is a tip admonition for helpful advice.</Admonition><Admonition type="warning" title="Warning">This is a warning admonition for caution.</Admonition><Admonition type="danger" title="Danger">This is a danger admonition for critical warnings.</Admonition>
Note
This is a note admonition with additional context.
Pro Tip
This is a tip admonition for helpful advice.
Warning
This is a warning admonition for caution.
Danger
This is a danger admonition for critical warnings.
Tabs
<Tabs defaultValue="tab1"><TabsList><TabsTrigger value="tab1">Tab One</TabsTrigger><TabsTrigger value="tab2">Tab Two</TabsTrigger><TabsTrigger value="tab3">Tab Three</TabsTrigger></TabsList><TabsContent value="tab1">Content for the first tab goes here.</TabsContent><TabsContent value="tab2">Content for the second tab goes here.</TabsContent><TabsContent value="tab3">Content for the third tab goes here.</TabsContent></Tabs>
Content for the first tab goes here.
Accordion
<Accordion type="single" collapsible><AccordionItem value="item-1"><AccordionTrigger>What is MDX?</AccordionTrigger><AccordionContent>MDX allows you to use JSX components in Markdown content.</AccordionContent></AccordionItem><AccordionItem value="item-2"><AccordionTrigger>How do I use components?</AccordionTrigger><AccordionContent>Import components and use them like JSX elements in your MDX files.</AccordionContent></AccordionItem></Accordion>
Steps
<Steps><Step>First step description</Step><Step>Second step description</Step><Step>Third step description</Step></Steps>
First step description
Second step description
Third step description
Audio Player
<MP3src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3"controls={true}autoPlay={false}/>
Video Player
<MP4src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"controls={true}muted={true}/>
Spotify Embeds
<!-- Track --><Spotify id="4uLU6hMCjMI75M1A2tKUQC" type="track" /><!-- Playlist --><Spotify id="37i9dQZF1DXcBWIGoYBM5M" type="playlist" />
Math Equations
## Inline MathThe famous equation <Latex math="E = mc^2" /> shows mass-energy equivalence.## Block Math<Latex math="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}" block /><Latex math="\frac{\partial^2 u}{\partial t^2} = c^2 \nabla^2 u" block />
Inline Math
The famous equation shows mass-energy equivalence.
Block Math
Footnotes
This text has a footnote<Ref id="1" /> and another one<Ref id="2" />.<FootNotes><FootNote id="1">This is the first footnote with details.</FootNote><FootNote id="2">This is the second footnote with more information.</FootNote></FootNotes>
This text has a footnote[1] and another one[2].
Images
