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:

npm install my-package

yarn add my-package

pnpm add my-package

bun add my-package

<Tabs>
  <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

Persistent Tab Selection

Tab selections are remembered within the page. When a user selects "Python" in one tab group, other tab groups with a "Python" option will also switch.

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 tab groups sync!