MDX Components

Nextra supports using React components directly in Markdown. Nextra418 includes several common built-in components.

Callout

Callout components are used to highlight important information, warnings, or errors.


import { Callout } from "nextra/components";
 
<Callout type="info">This is an info message.</Callout>
<Callout type="warning">This is a warning message.</Callout>
<Callout type="error">This is an error message.</Callout>

This is an info message.

This is a warning message.

This is an error message.

Tabs

Tabs components allow you to organize content into multiple tabs, useful for showing different versions or alternatives.


import { Tabs } from "nextra/components";
 
<Tabs items={["npm", "pnpm"]}>
<Tabs.Tab>
 
```bash
npm install
```
 
</Tabs.Tab>
<Tabs.Tab>
 
```bash
pnpm install
```
 
</Tabs.Tab>
</Tabs>

npm


npm install

Cards

Cards components are used to display links or navigation items in a grid layout.


import { Cards } from "nextra/components";
 
<Cards>
  <Cards.Card title="Introduction" href="/docs/introduction" />
  <Cards.Card title="Visit Official Site" href="https://nextra.site" arrow />
</Cards>

Introduction Visit Official Site

Refer to the Nextra official documentation for more component usage.