MDX Component

Tabs#

import Tabs from '@components/Tabs'
<Tabs 
  tabsA="Tabs A" 
  contentA="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." 
  tabsB="Tabs B" 
  contentB="Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old."
/>

Accordion#

import Accordion from '@components/Accordion'
<Accordion title="Accordion Title" body="Accordion Body"/>
<Accordion title="Accordion Title" body="Accordion Body"/>

Badge#

import Badge from '@components/Badge'
<Badge>😂 Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="dark">Dark</Badge>

😂 Default Success Warning Info Purple Danger Dark

Badge Outline#

import BadgeOutline from '@components/BadgeOutline'
<BadgeOutline>😂 Default</BadgeOutline>
<BadgeOutline variant="success">Success</BadgeOutline>
<BadgeOutline variant="warning">Warning</BadgeOutline>
<BadgeOutline variant="info">Info</BadgeOutline>
<BadgeOutline variant="purple">Purple</BadgeOutline>
<BadgeOutline variant="danger">Danger</BadgeOutline>
<BadgeOutline variant="dark">Dark</BadgeOutline>

😂 Default Success Warning Info Purple Danger Dark

Alert#

import Alert from '@components/Alert'
<Alert>😂 Default</Alert>
<Alert variant="success"><span className="font-semibold">Success !</span> Success message</Alert>
<Alert variant="warning"><span className="font-bold">Warning !</span> Warning message</Alert>
<Alert variant="info">Info</Alert>
<Alert variant="purple">Purple</Alert>
<Alert variant="danger">Danger</Alert>
<Alert variant="dark">Dark</Alert>

Alert Outline#

import AlertOutline from '@components/AlertOutline'
<AlertOutline>😂 Default</AlertOutline>
<AlertOutline variant="success"><span className="font-semibold">Success !</span> Success message</AlertOutline>
<AlertOutline variant="warning"><span className="font-bold">Warning !</span> Warning message</AlertOutline>
<AlertOutline variant="info">Info</AlertOutline>
<AlertOutline variant="purple">Purple</AlertOutline>
<AlertOutline variant="danger">Danger</AlertOutline>
<AlertOutline variant="dark">Dark</AlertOutline>

Heading#

# **Hello**, This Is a _Title_ Inside `h1`

Hello, This Is a Title Inside h1

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

### **Hello**, This Is a _Title_ Inside `h3`

Hello, This Is a Title Inside h3#

#### **Hello**, This Is a _Title_ Inside `h4`

Hello, This Is a Title Inside h4#

##### **Hello**, This Is a _Title_ Inside `h5`

Hello, This Is a Title Inside h5#

###### **Hello**, This Is a _Title_ Inside `h6`

Hello, This Is a Title Inside h6#

Text#

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, it's an advanced Markdown format with React component support.

Text Variant#

**bold**

bold

**_italicized bold_**

italicized bold

_italicized_

italicized

~~strikethrough.~~

strikethrough.

Emoji ⛺#

Emoji Docs 😂

⚠️ ⛔ ✅ ☑️ ✔️ ❌

Line Separator#

---

Image#

External URL :

![Image External](https://source.unsplash.com/eaxwP9J_V6s/600x300)

Static Image URL :

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

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

Static Next/Image :

You can use Next.js Image directly in MDX.

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

import Image from 'next/image'
<Image src="/demo.png" alt="Hello" width={500} height={300} />

Link#

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

MDX, it's an external link

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

Index, it's an internal link

List#

1. one
2. two
3. three

1. one
2. two
3. three

- one
- two
- three

• one
• two
• three

Task List#

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

• Write the press release
• Update the website
• Contact the media

Custom div#

<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
  Stars on GitHub!
</div>

Syntax Highlighting#

Automatically syntax highlighting:

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

Renders:

console.log('hello, world')

You can also add the highlight=<line|range> modifier to highlight specific lines:

```jsx highlight=4,6-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>
}
```

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

Inline Code#

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.

Blockquote#

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

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

| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |

| Syntax                                   | Description |   Test Text |
| :------------                            | :---------: | ----------: |
| <Badge>Default</Badge>                   |    Title    | Here's this |
| <Badge variant="success">Success</Badge> |    Text     |    And more |
| <Badge variant="danger">Danger</Badge>   |             |    ~~Text~~ |

React Components#

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

Default#

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#

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

Error#

import Callout from 'nextra-theme-docs/callout'
<Callout type="error" emoji="️🚫">
  This is a dangerous feature that can cause everything to explode.
</Callout>

<Callout>
  Give [**Next Docs**](https://github.com/wahidari/next-docs) a star!
</Callout>

Renders:

💡

Give Next Docs a star!

Callout#

You can use import and use React components inside your Markdown files like this:

import Callout from 'nextra-theme-docs/callout'
**Markdown With React Components**
<Callout emoji="✅">
  **MDX** (the library), at its core, transforms MDX (the syntax) to JSX.
  It receives an MDX string and outputs a _JSX string_. It does this by parsing
  the MDX document to a syntax tree and then generates a JSX document from that tree. 
</Callout>

Generates:

Bleed#

import Bleed from 'nextra-theme-docs/bleed'

When wrapping your content with <Bleed>, it will be slightly wider than the container and will overflow on both sides.

It provides a better reading experience when you want to present some graphical information, which normally looks nicer in a larger size.

For example you can put text, image, video or any component inside: