Tabs

Use <Tabs> and <TabItem> to switch between options; they are globally registered in MDX site-wide, no import needed.

Basic Usage

Source

<Tabs>
<TabItem value="bash" label="Bash" default>
```bash
echo "Hello from Bash"
```
</TabItem>
<TabItem value="python" label="Python">
```python
print("Hello from Python")
```
</TabItem>
</Tabs>

Result

Bash

echo "Hello from Bash"

Python

print("Hello from Python")

Synced Groups

Give multiple <Tabs> the same groupId and they sync: switching one switches all blocks with the same groupId to the matching tab. Useful for splitting "install steps" and "path notes" while keeping a unified choice.

The two independent <Tabs> below both use groupId="os"; switching either one syncs the other:

Source

<Tabs groupId="os">
<TabItem value="mac" label="macOS" default>
Install on macOS
</TabItem>
<TabItem value="win" label="Windows">
Install on Windows
</TabItem>
</Tabs>
<Tabs groupId="os">
<TabItem value="mac" label="macOS">
macOS path: /Applications
</TabItem>
<TabItem value="win" label="Windows" default>
Windows path: C:\Program Files
</TabItem>
</Tabs>

Result

macOS

Install on macOS

Windows

Install on Windows

macOS

macOS path: /Applications

Windows

Windows path: C:\Program Files

Two Options

There is no limit on the number of options; below is the common two-tab pattern:

Source

<Tabs>
<TabItem value="npm" label="npm" default>
```bash
npm install docusaurus
```
</TabItem>
<TabItem value="yarn" label="yarn">
```bash
yarn add docusaurus
```
</TabItem>
</Tabs>

Result

npm

npm install docusaurus

yarn

yarn add docusaurus

Three Options

Below is the three-tab pattern; extend horizontally for more:

Source

<Tabs>
<TabItem value="js" label="JavaScript" default>
```js
console.log("JS");
```
</TabItem>
<TabItem value="ts" label="TypeScript">
```ts
console.log("TS");
```
</TabItem>
<TabItem value="py" label="Python">
```python
print("Python")
```
</TabItem>
</Tabs>

Result

JavaScript

console.log("JS");

TypeScript

console.log("TS");

Python

print("Python")

Parameters

• <Tabs>: container; add groupId to sync multiple blocks
• <TabItem value="..." label="..." default>: value uniquely identifies the tab within its block, label is the displayed text, default marks the initially selected tab
• Sync rule: only <Tabs> blocks with the same groupId sync (persisted via localStorage, kept after refresh); value only needs to be unique within its own block and may repeat across blocks. To keep blocks independent, use different groupId values.