Tabs

Organize content into switchable tab panels.

Tabs let you present multiple versions of content in a compact layout. Useful for showing code in different languages or package managers.

Basic Usage

function App() {
  return <h1>Hello React</h1>;
}

<Tabs items={["React", "Vue", "Svelte"]}>
  <Tab value="React">React content here</Tab>
  <Tab value="Vue">Vue content here</Tab>
  <Tab value="Svelte">Svelte content here</Tab>
</Tabs>

Package Manager Tabs

pnpm add next react react-dom

Props

Tabs

Prop	Type	Default	Description
`items`	`string[]`	required	Tab labels
`defaultValue`	`string`	First item	Initially active tab

Tab

Prop	Type	Description
`value`	`string`	Must match an item in `items`

Edit this page on GitHub

Callout Steps

On This Page

Basic Usage
Package Manager Tabs
Props
Tabs
Tab