Tabs

Tabs help organize related content into switchable panels.

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 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 automatically sync across the page. Click a tab in one group and all matching tabs update together. This is useful for showing consistent package manager or language choices throughout a page.

Install the package:

npm install my-package

Run the development server:

npm run dev

Build for production:

npm run build

Synchronization happens automatically when tab titles match (case-insensitive). No additional configuration is needed.

Code Examples

Tabs are perfect for showing code in multiple languages:

const response = await fetch('/api/data');
const data = await response.json();

Properties

Tabs

Tab