MDX Component Showcase

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

Patrick Prunty avatar
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 Lists
1. First numbered item
2. Second numbered item
1. Nested numbered item
2. Another nested numbered item
3. Third numbered item

Unordered Lists

  • First item
  • Second item
    • Nested item
    • Another nested item
  • Third item

Ordered Lists

  1. First numbered item
  2. Second numbered item
    1. Nested numbered item
    2. Another nested numbered item
  3. 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

```javascript
function hello(name) {
return `Hello, ${name}!`;
}
console.log(hello("World"));
\```
function hello(name) {
return `Hello, ${name}!`;
}
console.log(hello("World"));
```typescript
interface 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 |
ComponentTypeFeatures
MP3AudioLazy loading, controls
MP4VideoResponsive, controls
SpotifyEmbedTracks, 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>

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

<MP3
src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3"
controls={true}
autoPlay={false}
/>

Video Player

<MP4
src="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 Math
The 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 E=mc2E = mc^2 shows mass-energy equivalence.

Block Math

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
∂2u∂t2=c2∇2u\frac{\partial^2 u}{\partial t^2} = c^2 \nabla^2 u

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

![Alt text](/path/to/image.jpg)

Sample Image

1. ^ This is the first footnote with details.
2. ^ This is the second footnote with more information.
MDX Component Showcase