Tabs

Overview

The Tabs and Tab components let you group related content under named tabs, allowing readers to switch between views without leaving the page. They are ideal for showing code in multiple languages, platform-specific instructions, or before/after comparisons.

• Tabs: The wrapper that manages the active tab state and renders the tab bar.
• Tab: An individual panel with a required title shown in the tab bar.

Example

    npm install my-package

Usage

Basic tabs

<Tabs>
  <Tab title="First">Content for the first tab.</Tab>
  <Tab title="Second">Content for the second tab.</Tab>
</Tabs>

Code in tabs

When embedding code blocks inside tabs, add blank lines before and after each code fence:

    <Tabs>
        <Tab title="TypeScript">
        ```ts
                const greet = (name: string): string => `Hello, ${name}`;
        ```
        </Tab>
        <Tab title="JavaScript">
            ```js
                const greet = (name) => `Hello, ${name}`;
            ```
        </Tab>
    </Tabs>
 

Code and preview tabs

A common pattern for documentation is pairing a Code tab with an Output tab:

    <Tabs>
        <Tab title="Code">
            ```tsx
                    export function Hello() {
                    return <p>Hello world</p>;
                    }
            ```
        </Tab>
        <Tab title="Output">
            Content rendered here.
        </Tab>
    </Tabs>

Props

Tabs

Tab

Notes

• The first tab is active by default.
• Tabs ignores non-element children such as whitespace and text nodes injected by MDX, so only Tab components with a title prop are rendered.
• Always add blank lines before and after code fences inside Tab content to prevent MDX from collapsing them onto a single line.

Accessibility Notes

• Tab buttons are rendered as <button> elements and are keyboard accessible.
• Consider using descriptive tab titles so users can anticipate the content before switching.
• Avoid putting critical information exclusively in a non-default tab where possible.