🎉 Nextra 2.0 is released. Read more →
Docs
Components
MDX

MDX Component

Heading

index.mdx
<h1>**Hello**, This Is a _Title_ Inside `h1`</h1>
{/* using html tag to avoid being rendered in the sidebar */}

Hello, This Is a Title Inside h1

index.mdx
<h2>**Hello**, This Is a _Title_ Inside `h2`</h2>
{/* using html tag to avoid being rendered in the sidebar */}

Hello, This Is a Title Inside h2

index.mdx
### **Hello**, This Is a _Title_ Inside `h3`

Hello, This Is a Title Inside h3

index.mdx
#### **Hello**, This Is a _Title_ Inside `h4`

Hello, This Is a Title Inside h4

index.mdx
##### **Hello**, This Is a _Title_ Inside `h5`
Hello, This Is a Title Inside h5
index.mdx
###### **Hello**, This Is a _Title_ Inside `h6`
Hello, This Is a Title Inside h6

Text

index.mdx
With Nextra, all your `.md` and `.mdx` files under the pages directory will be rendered with [MDX](https://mdxjs.com/about), it's an
advanced Markdown format with React component support.

With Nextra, all your .md and .mdx files under the pages directory will be rendered with MDX (opens in a new tab), it's an advanced Markdown format with React component support.

Text Variant

index.mdx
**bold**
__bold__

bold

index.mdx
**_italicized bold_**
***italicized bold***
___italicized bold___

italicized bold

index.mdx
_italicized_
*italicized*

italicized

index.mdx
~~strikethrough.~~

strikethrough.

Emoji ⛺

Emoji Docs (opens in a new tab) 😂

⚠️ ⛔ ✅ ☑️ ✔️ ❌ 🚀 ⏱️ 💻 📁 🔒 🛠️ 📢 🔔 💡 📓 📆 🌄 🌇 🌍 🌒 ⚡ ❄️ 🔥 ⭐☀️

Line Separator

index.mdx
---
***

Image

External URL :

index.mdx
![Image External](https://images.unsplash.com/photo-1644840379571-2a973eee0726?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=470&q=80)

Image External

Static Image URL :

If the demo.png file is located at /public/demo.png, you can use the code below to display it:

index.mdx
![Image External](../../../public/demo.png)

Image External

Static Next/Image :

You can use Next.js Image (opens in a new tab) directly in MDX.

If the demo.png file is located at /public/demo.png, you can use the code below to display it:

index.mdx
import Image from "next/image";
 
<Image src="/demo.png" alt="Hello" className="rounded-lg" width={500} height={300} />;
Hello

Link

Autolink literals

index.mdx
www.example.com, https://example.com, and contact@example.com.

www.example.com (opens in a new tab), https://example.com (opens in a new tab), and contact@example.com.

index.mdx
[MDX](https://mdxjs.com/about), it's an external link

MDX (opens in a new tab), it's an external link

index.mdx
[Index](/), it's an internal link

Index, it's an internal link

You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in quotation marks after the URL.

index.mdx
[MDX](https://mdxjs.com/about "MDX Documentation"), Documentation

MDX (opens in a new tab), Documentation

List

index.mdx
1. one
2. two
3. three
  1. one
  2. two
  3. three
index.mdx
1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item
  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item
index.mdx
- one
- two
- three
  • one
  • two
  • three
index.mdx
- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item
  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item
index.mdx
1. First item
2. Second item
3. Third item
    - Indented item
    - Indented item
4. Fourth item
  1. First item
  2. Second item
  3. Third item
    • Indented item
    • Indented item
  4. Fourth item
index.mdx
* asterisks for unordered items
1. decimals and a dot for ordered items
  • asterisks for unordered items
  1. decimals and a dot for ordered items
index.mdx
* Next
  * docs
- Next
  - docs
+ Next
  + docs
  • Next
    • docs
  • Next
    • docs
  • Next
    • docs

Task List

index.mdx
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
  • Write the press release
  • Update the website
  • Contact the media

Syntax Highlighting

Automatically syntax highlighting:

index.mdx
```js filename="index.mdx" copy
console.log("hello, world");
```

Renders:

index.mdx
console.log("hello, world");

Inlined Code

index.mdx
You can use \`content\` to wrap inline code content like: `let x = 1`.

You can use `content` to wrap inline code content like: let x = 1.

Inlined syntax highlighting like let x = 1 is also supported via the {:} syntax:

Markdown
Inlined syntax highlighting is also supported `let x = 1{:jsx}` via:

Highlighting Lines

You can also add the {line number, line number-line number} modifier to highlight specific lines:

index.mdx
```jsx filename="index.mdx" {4, 7-8}
import useSWR from "swr";
 
function Profile() {
	const { data, error } = useSWR("/api/user", fetcher);
 
	if (error) return <div>failed to load</div>;
	if (!data) return <div>loading...</div>;
	return <div>hello {data.name}!</div>;
}
```
index.mdx
import useSWR from "swr";
 
function Profile() {
	const { data, error } = useSWR("/api/user", fetcher);
 
	if (error) return <div>failed to load</div>;
	if (!data) return <div>loading...</div>;
	return <div>hello {data.name}!</div>;
}

Highlighting Substrings

You can highlight specific substrings of code by adding a // attribute to the code block:

Markdown
```js /useState/
import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```
import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

You can highlight only a part of the occurrences of that substring by adding a number it: /str/1, or multiple: /str/1-3, /str/1,3.

Line Numbers

You can add line numbers to your code blocks by adding a showLineNumbers attribute:

Markdown
```js showLineNumbers
import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

Renders:

import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Copy Button

By adding a copy attribute, a copy button will be added to the code block when the user hovers over it:

```js copy
console.log('hello, world')
```
console.log('hello, world')

Diff Code

index.mdx
```diff filename="index.mdx"
- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'
```
index.mdx
- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'

Blockquote

index.mdx
> Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
>
> — Alan Kay, A Personal Computer for Children of All Ages

Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.

— Alan Kay, A Personal Computer for Children of All Ages

Nested quotes:

index.mdx
> > Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
> >
> > — Alan Kay, A Personal Computer for Children of All Ages
>
> This is **great**.
>
> — Shu Ding.

Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.

— Alan Kay, A Personal Computer for Children of All Ages

This is great.

— Shu Ding.

Table

index.mdx
| Left | Center | Right |
| :--- | :----: | ----: |
| Left-aligned | Center-aligned | Right-aligned |
LeftCenterRight
Left-alignedCenter-alignedRight-aligned
index.mdx
| Syntax        | Description |   Test Text |
| :-----------  | :---------: | --------:   |
| Header        |    Title    | Here's this |
| Paragraph	    |    Text     |   And more  |
| Strikethrough |             |   ~~Text~~  |
SyntaxDescriptionTest Text
HeaderTitleHere's this
ParagraphTextAnd more
StrikethroughText
index.mdx
| Badge | Description | Code | Icon |
| :- | :-: | :-: | -: |
| <Badge>Default</Badge> | Default | <span className="font-semibold text-blue-500">100</span> | ☑️ |
| <Badge variant="success">Success</Badge> | Success | <span className="font-semibold text-green-500">200</span> | ✅ |
| <Badge variant="info">Warning</Badge> | Warning | <span className="font-semibold text-orange-500">400</span> | ⚠️ |
| <Badge variant="danger">Danger</Badge> | Danger | <span className="font-semibold text-red-500">500</span> | ⛔ |
BadgeDescriptionCodeIcon
DefaultDefault100☑️
SuccessSuccess200✅
WarningWarning400⚠️
DangerDanger500⛔

React Components

React components and Markdown can be mixed together, for instance:

Default

👾

Space Invaders is a 1978 shoot 'em up arcade game developed by Tomohiro Nishikado.

index.mdx
import Callout from "nextra-theme-docs/callout";
 
<Callout emoji="👾">
	**Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
	Nishikado.
</Callout>

Warning

⚠️

This API will be deprecated soon.

index.mdx
import Callout from "nextra-theme-docs/callout";
 
<Callout type="warning" emoji="⚠️">
	This API will be deprecated soon.
</Callout>

Error

🚫

This is a dangerous feature that can cause everything to explode.

index.mdx
import Callout from "nextra-theme-docs/callout";
 
<Callout type="error" emoji="️🚫">
	This is a dangerous feature that can cause everything to explode.
</Callout>
index.mdx
>
<Callout>
	> Give [**Next Docs**](https://github.com/wahidari/next-docs-v2) a star! >
</Callout>

Renders:

💡

Give Next Docs (opens in a new tab) a star!

Embed Iframe

index.mdx
<iframe
	width="100%"
	height="430"
	src="https://www.youtube.com/embed/3hccXiXI0u8"
	frameBorder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowFullScreen
/>
index.mdx
<iframe
	src="https://codesandbox.io/embed/swr-states-4une7"
	width="100%"
	height="500px"
	title="SWR-States"
></iframe>

Footnote

A note1

Here's a simple footnote,2 and here's a longer one.3

Footnotes

  1. Big note. ↩

  2. This is the simple footnote. ↩

  3. Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    { my code }

    Add as many paragraphs as you like. ↩

ComponentsCustom