Compliance
Taxes

Cards Component

Example

CalloutTabsSteps

Steps Component

A built-in component to turn a numbered list into a visual representation of steps.

Example

This is the first step

This is the first step description.

This is the second step

This is the second step description.

This is the third step

This is the third step description.

Usage

Wrap a set of markdown h3 headings with the Steps component to turn them into visual steps.

Step 1

Content for step 1.

Step 2

Contents for step 2.

import { Steps } from 'nextra/components'
 
<Steps>
### Step 1
 
Contents for step 1.
 
### Step 2
 
Contents for step 2.
</Steps>

Callout Component

A built-in component to show important information to the reader.

Example

💡

A callout is a short piece of text intended to attract attention.

A callout is a short piece of text intended to attract attention.

⚠️

A callout is a short piece of text intended to attract attention.

🚫

A callout is a short piece of text intended to attract attention.

Usage

Default

👾

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

import { Callout } from 'nextra/components'
 
<Callout emoji="👾">
  **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
  Nishikado.
</Callout>

Info

ℹ️

Today is Friday.

import { Callout } from 'nextra/components'
 
<Callout type="info" emoji="ℹ️">
  Today is Friday.
</Callout>

Warning

⚠️

This API will be deprecated soon.

import { Callout } from 'nextra/components'
 
<Callout type="warning" emoji="⚠️">
  This API will be deprecated soon.
</Callout>

Error

🚫

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

import { Callout } from 'nextra/components'
 
<Callout type="error" emoji="️🚫">
  This is a dangerous feature that can cause everything to explode.
</Callout>

API

The Callout component takes the following props:

type (optional)

The type of the Callout.

  • Type: 'default' | 'info' | 'warning' | 'error'
  • Default: 'default'

emoji (optional)

The icon to show in the Callout. You can also show your custom icon using this prop.

  • Type: string | ReactNode
  • Default: '💡'

children

The content of the Callout.

  • Type: ReactNode

Tabs Component

Example

pnpm: Fast, disk space efficient package manager.

Usage

Default

import { Tabs } from 'nextra/components'
 
<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>

Default Selected Index

You can use the defaultIndex prop to set the default tab index:

import { Tabs } from 'nextra/components'
 
<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
  ...
</Tabs>

And you will have npm as the default tab:

Registered Agent ServicesForms