> ## Documentation Index
> Fetch the complete documentation index at: https://www.usenotra.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

> Show alternatives, like package managers or platforms, in one place.

Tabs show alternatives, like package managers or platforms, in one place, so readers pick the one that applies to them.

````mdx theme={"system"}
<Tabs>
  <Tab title="npm">
    ```bash
    npm install acme
    ```
  </Tab>
  <Tab title="bun">
    ```bash
    bun add acme
    ```
  </Tab>
</Tabs>
````

<Frame caption="How it looks on your site">
  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/tabs-light.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=3d691ca755f7377430112f0456f59855" alt="Tabs with npm and bun on a Notra site" className="block dark:hidden" width="1824" height="336" data-path="images/sites/components/tabs-light.webp" />

  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/tabs-dark.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=743cb07858e2e5c71e414aa72d43070b" alt="Tabs with npm and bun on a Notra site" className="hidden dark:block" width="1824" height="336" data-path="images/sites/components/tabs-dark.webp" />
</Frame>

The first tab is open when the page loads, and readers switch with a click or with the arrow keys. Without JavaScript, every tab shows one below the other under its title.

## Props

### Tab

<ResponseField name="title" type="string" required>
  The tab's label.
</ResponseField>

`Tabs` takes no props.

## Styling

Tab groups carry the class `tabs` and each panel carries `tab`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.