`Tabs` Component

A built-in component for creating tabbed content, helping organize related information in a compact, interactive layout.

Exported from nextra/components.

Props

Name	Type	Default
`items`	`(string \| TabObjectItem)[]` Deprecated: Use `Tabs.Tab#label` and `Tabs.Tab#disabled` props instead.
`children`	`ReactNode`
`storageKey`	`string` LocalStorage key for persisting the selected tab.
`className`	`string \| ((bag: ListRenderPropArg) => string) \| undefined` Tabs CSS class name.
`tabClassName`	`string \| ((bag: TabRenderPropArg) => string) \| undefined` Tab CSS class name.
`defaultIndex`	`number`
`onChange`	`(index: number) => void`
`selectedIndex`	`number`

Example

pnpm: Fast, disk space efficient package manager.

Usage


import { Tabs } from 'nextra/components'
 
<Tabs>
  <Tabs.Tab label="pnpm">**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
  <Tabs.Tab label="npm">**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
  <Tabs.Tab label="yarn">**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 defaultIndex="1">
  ...
</Tabs>

And you will have npm as the default tab:

Tabs Component