Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shuding/nextra/llms.txt

Use this file to discover all available pages before exploring further.

The Tabs component organizes related-but-alternative content — such as code snippets for different package managers, operating systems, or programming languages — into a compact, interactive tab strip. Each tab panel is rendered in the DOM for SEO purposes but hidden with CSS when not selected. Individual panels are exposed via Tabs.Tab.

​
Import

import { Tabs } from 'nextra/components'

​
Props

​
<Tabs>

PropTypeDefaultDescription
itemsstring[] | TabObjectItem[]—Required. The ordered list of tab labels. Pass a { label, disabled: true } object to disable a specific tab.
defaultIndexnumber0The zero-based index of the tab that is selected on first render.
storageKeystring—When provided, the selected tab index is persisted to localStorage under this key and synced across all <Tabs> instances on the page sharing the same key.
selectedIndexnumber—Controlled selected index.
onChange(index: number) => void—Callback fired when the user changes the selected tab.
classNamestring—CSS class applied to the tab list container.
tabClassNamestring—CSS class applied to each individual tab button.

​
<Tabs.Tab>

Each <Tabs.Tab> corresponds — in order — to the label at the same index in the parent’s items array.
PropTypeDefaultDescription
childrenReactNode—The content displayed when this tab is active. Supports full MDX.

​
Usage

​
Basic Tabs

import { Tabs } from 'nextra/components'

<Tabs items={['pnpm', 'npm', 'yarn']}>
  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
  <Tabs.Tab>**npm**: Comes installed with Node.js.</Tabs.Tab>
  <Tabs.Tab>**yarn**: Modern package manager by Meta.</Tabs.Tab>
</Tabs>

​
Setting a Default Tab

Use defaultIndex to start on a tab other than the first. The index is zero-based, so defaultIndex={1} selects the second tab. 
import { Tabs } from 'nextra/components'

<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex={1}>
  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
  <Tabs.Tab>**npm**: Comes installed with Node.js.</Tabs.Tab>
  <Tabs.Tab>**yarn**: Modern package manager by Meta.</Tabs.Tab>
</Tabs>

​
Syncing Tabs Across the Page

When multiple <Tabs> components on the same page share a storageKey, selecting a tab in one automatically selects the matching index in all others. The selection is also persisted across page reloads via localStorage. 
import { Tabs } from 'nextra/components'

### Install

<Tabs items={['pnpm', 'npm', 'yarn']} storageKey="pkg-manager">
  <Tabs.Tab>`pnpm add nextra`</Tabs.Tab>
  <Tabs.Tab>`npm install nextra`</Tabs.Tab>
  <Tabs.Tab>`yarn add nextra`</Tabs.Tab>
</Tabs>

### Run

<Tabs items={['pnpm', 'npm', 'yarn']} storageKey="pkg-manager">
  <Tabs.Tab>`pnpm dev`</Tabs.Tab>
  <Tabs.Tab>`npm run dev`</Tabs.Tab>
  <Tabs.Tab>`yarn dev`</Tabs.Tab>
</Tabs>
Choosing the same storageKey value across multiple pages means the user’s package manager preference is remembered throughout the entire documentation site, not just the current page.

​
Disabling a Tab

Pass a { label, disabled: true } object instead of a plain string to disable a specific tab. 
import { Tabs } from 'nextra/components'

<Tabs items={['pnpm', 'npm', { label: 'bun', disabled: true }]}>
  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
  <Tabs.Tab>**npm**: Comes installed with Node.js.</Tabs.Tab>
  <Tabs.Tab>Coming soon.</Tabs.Tab>
</Tabs>

​
Tabs with Code Blocks

Tab panels support full MDX, including fenced code blocks with syntax highlighting. Use four backticks for the outer fence when your content contains triple-backtick code blocks: 
import { Tabs } from 'nextra/components'

<Tabs items={['pnpm', 'npm', 'yarn']}>
  <Tabs.Tab>
    ```sh
    pnpm add nextra nextra-theme-docs
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```sh
    npm install nextra nextra-theme-docs
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```sh
    yarn add nextra nextra-theme-docs
    ```
  </Tabs.Tab>
</Tabs>
All tab panels are present in the rendered HTML and are discovered by Pagefind and other crawlers. Only the inactive panels are hidden with CSS, so your content remains fully indexable.

Build docs developers (and LLMs) love

Get started for freeTalk to us