# Tabs

Use `Tabs` for mutually exclusive examples, such as package managers, frameworks, or operating systems. Use `CodeGroup` instead when the only content in each tab is code.

## Usage

```mdx
<Tabs>
  <Tab title="npm">
    <Code lang="bash">npm install reallysimpledocs</Code>
  </Tab>
  <Tab title="pnpm">
    <Code lang="bash">pnpm add reallysimpledocs</Code>
  </Tab>
  <Tab title="yarn">
    <Code lang="bash">yarn add reallysimpledocs</Code>
  </Tab>
  <Tab title="bun">
    <Code lang="bash">bun add reallysimpledocs</Code>
  </Tab>
</Tabs>
```

## Options

### Tabs

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `variant` | `string` | `undefined` | Basecoat tab variant, such as `"line"`. |
| `class` | `string` | `""` | Extra classes applied to the tabs root. |

### Tab

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `title` | `string` | Required | Label shown in the tab trigger. |

## Examples

### Default

```mdx
<Tabs class="w-full">
  <Tab title="npm">
    <Code lang="bash">npm install reallysimpledocs basecoat-css@beta tailwindcss</Code>
  </Tab>
  <Tab title="pnpm">
    <Code lang="bash">pnpm add reallysimpledocs basecoat-css@beta tailwindcss</Code>
  </Tab>
  <Tab title="yarn">
    <Code lang="bash">yarn add reallysimpledocs basecoat-css@beta tailwindcss</Code>
  </Tab>
  <Tab title="bun">
    <Code lang="bash">bun add reallysimpledocs basecoat-css@beta tailwindcss</Code>
  </Tab>
</Tabs>
```

### Line variant

```mdx
<Tabs variant="line" class="w-full">
  <Tab title="Integration">
    <Callout title="Recommended">
      Let the integration wire routes and assets for the docs section.
    </Callout>
  </Tab>
  <Tab title="Manual">
    <Callout type="warning" title="Manual setup">
      Manual wiring is useful for debugging, but it is not the normal install path.
    </Callout>
  </Tab>
</Tabs>
```