Tabs

Tabs let you organize related content into switchable panels, perfect for showing alternatives like different programming languages or platforms.

Basic Tabs

console.log('Hello, world!');

print('Hello, world!')

print('Hello, world!');

<Tabs>
  <Tab name="JavaScript">
    ```javascript
    console.log('Hello, world!');
    ```
  </Tab>
  <Tab name="Python">
    ```python
    print('Hello, world!')
    ```
  </Tab>
  <Tab name="Dart">
    ```dart
    print('Hello, world!');
    ```
  </Tab>
</Tabs>

Tabs with Rich Content

Tabs can contain any Markdown content, not just code:

brew install stardust

curl -sSL https://example.com/install.sh | bash

scoop install stardust

Package Manager Examples

A common use case — showing installation commands for different package managers. Add group="pkg-manager" so every package-manager block on the page (and across your site) stays in sync:

npm install my-package

yarn add my-package

pnpm add my-package

bun add my-package

<Tabs group="pkg-manager">
  <Tab name="npm">
    ```bash
    npm install my-package
    ```
  </Tab>
  <Tab name="yarn">
    ```bash
    yarn add my-package
    ```
  </Tab>
  <Tab name="pnpm">
    ```bash
    pnpm add my-package
    ```
  </Tab>
  <Tab name="bun">
    ```bash
    bun add my-package
    ```
  </Tab>
</Tabs>

Framework Comparison

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

<template>
  <h1>Hello, Vue!</h1>
</template>

<h1>Hello, Svelte!</h1>

Best Practices

Synced & Persistent Selection

Give related tab groups a shared group and they switch together — and the choice is remembered across reloads and every other page via localStorage. It's ideal for package managers or operating systems repeated throughout your docs: the reader picks once and the whole site follows.

Matching is by tab label, so <Tab name="pnpm"> syncs to every other pnpm tab in the same group, regardless of order. Tab groups without a group stay independent.

name = "Stardust"

const name = "Stardust";

def greet(name):
    return f"Hello, {name}!"

function greet(name) {
  return `Hello, ${name}!`;
}

Select a language above and watch both groups sync — then reload the page and your choice sticks.

<Tabs group="lang">
  <Tab name="Python">...</Tab>
  <Tab name="JavaScript">...</Tab>
</Tabs>