# Tabs

Tabs present one choice among alternatives: install paths, operating systems, languages. The first tab is server-rendered so the page reads correctly with no JavaScript; a small island then wires keyboard navigation and selection.

## Basic tabs

Install with Homebrew, then verify with `docker --version`.

Install Docker Engine from your distribution's repository, then add your user to the `docker` group.

Install Docker Desktop and enable the WSL 2 backend.

```mdx
<Tabs>
  <Tab title="macOS">...</Tab>
  <Tab title="Linux">...</Tab>
  <Tab title="Windows">...</Tab>
</Tabs>
```

## Synced tabs

Give several `Tabs` blocks the same `group` and they switch together across the whole page. Pick "Linux" in either block below and both follow:

First block, macOS content.
First block, Linux content.

Second block, macOS content: synced with the first.
Second block, Linux content: synced with the first.

```mdx
<Tabs group="os">
  <Tab title="macOS">...</Tab>
  <Tab title="Linux">...</Tab>
</Tabs>
```

## Props

| Prop    | On     | Type   | Effect                                         |
| ------- | ------ | ------ | ---------------------------------------------- |
| `title` | `Tab`  | string | The tab's label                                |
| `group` | `Tabs` | string | Page-wide sync key: same group, same selection |

Tabs are for alternatives where the reader needs exactly one. If they should read all of it, use headings; if the content is optional depth, use an [accordion](/docs/components/accordions). For code-only alternatives, a [code group](/docs/components/code-groups) is tighter.