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

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

```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 |

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

<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 = mc^2$ shows mass-energy equivalence.

Block Math

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

\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)

1. ^ This is the first footnote with details.

2. ^ This is the second footnote with more information.

MDX Component Showcase

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