Tabs let you show variants of the same content in one block. Most often used for code samples in multiple languages, or instructions for different platforms.
Example#
Source#
MDX
<Tabs>
<TabsList>
<TabsTrigger value="curl">curl</TabsTrigger>
<TabsTrigger value="js">JavaScript</TabsTrigger>
</TabsList>
<TabsContent value="curl">
```bash
curl https://api.example.com/v1/users
```
</TabsContent>
<TabsContent value="js">
```js
fetch("https://api.example.com/v1/users")
```
</TabsContent>
</Tabs>The value on each TabsTrigger matches the value on the corresponding TabsContent. Pick anything — the value is internal, not shown to the reader.
Tabs sync across the page#
If a reader picks "Python" in one tab block, all other tab blocks on the page that have a "Python" tab switch too. This means a reader using Python only ever sees Python examples.
Sync is by tab label (case-insensitive). For sync to work, use consistent labels — JavaScript everywhere, not JavaScript in one and Node in another.
When to use Tabs vs separate code blocks#
| Situation | Use |
|---|---|
| Same operation, different languages | Tabs |
| Same operation, different shells (bash, PowerShell) | Tabs |
| Different steps in a process | Steps, not Tabs |
| Showing input vs output | Two code blocks, not Tabs |
Limits#
- Maximum 6 tabs per block. More than that and the reader can't scan them.
- Each tab can contain anything — code, prose, callouts, even nested components.
- Tabs don't show URLs in the address bar. If you need linkable variants, make them separate pages.