Tabs

Whenever your page offers parallel alternatives -- package managers, programming languages, OS-specific instructions -- Tabs let readers pick once and stay in context. Matching tab titles sync automatically across the entire page, so selecting "yarn" in one group flips every other npm/yarn/pnpm group to match.

Use Tabs when:

• Multiple implementations of the same concept exist (npm/yarn/pnpm, JavaScript/Python)
• Parallel options are mutually exclusive (users pick one, not both)
• Consistency matters - the reader's choice should persist throughout the page

Usage

<Tabs>
  <Tab title="npm">npm install jamdesk</Tab>
  <Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>

Basic Tabs

<Tabs>
  <Tab title="First Tab">

    Content for the first tab.

</Tab>
  <Tab title="Second Tab">

    Content for the second tab.

</Tab>
  <Tab title="Third Tab">

    Content for the third tab.

</Tab>
</Tabs>

Tabs vs CodeGroup vs Accordion

Rule of thumb: Use Tabs when the reader's choice (like preferred package manager) should persist throughout the page. Use CodeGroup for code-only comparisons. Use Accordion for content that can all be relevant.

Tabs with Icons

Add icons to tab titles using Font Awesome icons:

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

<Tabs>
  <Tab title="React" icon="react" iconType="brands">
    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```
</Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">
    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```
</Tab>
</Tabs>

Border Bottom

Use the borderBottom prop to add a visual separator below the tab content:

<Tabs borderBottom>
  <Tab title="Overview">

    This tab group has a bottom border for visual separation.

</Tab>
  <Tab title="Details">

    Useful when tabs contain varying content lengths.

</Tab>
</Tabs>

Synchronized Tabs

Tabs with matching titles sync across the page automatically. Click "yarn" in one group and all npm/yarn/pnpm tabs on the page switch together:

Install:

npm install my-package

Run:

npm run dev

Synchronization happens when tab titles match (case-insensitive).

Props

Tabs

Tab

What's Next?