Nextra Components

import { Bleed, Callout, Cards, FileTree, Steps, Tabs } from 'nextra/components' import { CopyIcon, GitHubIcon, MenuIcon } from 'nextra/icons'

`<Callout>`

Default

<Callout>This is a default callout.</Callout>

Error

<Callout type="error">This is an error callout.</Callout>

Info

<Callout type="info">This is an info callout. ¹</Callout>

Warning

<Callout type="warning">This is a warning callout.</Callout>

With custom emoji ²

<Callout emoji="🚀">This is a callout with a custom emoji.</Callout>

`<Steps>`

<Steps>

Step 1

Content for step 1.

Step 2

Contents for step 2.

</Steps> <Steps> ## Test Run pnpm test <Steps> ### nextra:test

### nextra-theme-docs:test

<Steps>
  #### more

  #### more more

  #### more more more

</Steps>

### nextra-theme-blog:test

</Steps>

Lint

</Steps>

`<Tabs>`

<Tabs items={['pnpm', 'npm', 'yarn']}> <Tabs.Tab>pnpm: Fast, disk space efficient package manager.</Tabs.Tab> <Tabs.Tab>npm is a package manager for the JavaScript programming language.</Tabs.Tab> <Tabs.Tab>Yarn is a software packaging system.</Tabs.Tab> </Tabs>

`<FileTree>`

`<Cards>`

<Cards num={2}> <Cards.Card arrow title="Documentation theme" href="/docs/docs-theme/start"> <>![Documentation theme](https://nextra.site/assets/docs-theme.png)</> </Cards.Card> <Cards.Card arrow title="Blog theme" href="/docs/blog-theme/start"> <>![Blog theme](https://nextra.site/assets/blog-theme.png)</> </Cards.Card> </Cards> <Cards> <Cards.Card icon={<CopyIcon />} title="Callout" href="/foo" /> <Cards.Card icon={<GitHubIcon />} title="Tabs" href="/bar" /> <Cards.Card icon={<MenuIcon />} title="Steps" href="/baz" /> </Cards>

`<details>` and `<summary>`

<details> <summary>Summary</summary> Details <details> <summary>Summary 2</summary> Details 2 </details> </details>

`<Bleed>`

GitHub Alert Syntax

[!NOTE]

Useful information that users should know, even when skimming content.

[!TIP]

Helpful advice for doing things better or more easily.

[!IMPORTANT]

Key information users need to know to achieve their goal.

[!WARNING]

Urgent info that needs immediate user attention to avoid problems.

[!CAUTION]

Advises about risks or negative outcomes of certain actions.

This is an info callout. ↩
With custom emoji ↩

<Callout>