Tabs

Tabs organize content into switchable panels, perfect for showing multiple options, code variants, or platform-specific instructions.

Basic Tabs

<Tabs>
<Tab title="npm">
```bash
npm install @syntext/sdk

npm install @syntext/sdk

yarn add @syntext/sdk

pnpm add @syntext/sdk

With Rich Content

Tabs can contain any content, not just code:

<Tabs>
<Tab title="macOS">
## Installation on macOS

Download the installer from our website or use Homebrew:

```bash
brew install myapp

winget install myapp

# Debian/Ubuntu
apt install myapp

# Fedora
dnf install myapp

brew install myapp

winget install myapp

# Debian/Ubuntu
apt install myapp

With Icons

Add icons to tab titles:

<Tabs>
<Tab title="TypeScript" icon="typescript">
TypeScript content...
</Tab>
<Tab title="Python" icon="python">
Python content...
</Tab>
</Tabs>

Synced Tabs

Tabs with the same group ID stay in sync across the page:

<Tabs group="language">
<Tab title="Node.js">Node content 1</Tab>
<Tab title="Python">Python content 1</Tab>
</Tabs>

<!-- Later on the page... -->

<Tabs group="language">
<Tab title="Node.js">Node content 2</Tab>
<Tab title="Python">Python content 2</Tab>
</Tabs>

When you select a tab in one group, all matching groups update.

Tab Props

Tabs Props

CodeGroup vs Tabs

Use <CodeGroup> for code-only content with language preference persistence:

const result = await fetch(url);

result = requests.get(url)

Use <Tabs> for mixed content or non-code options:

docker run -p 3000:3000 syntext/server

Best Practices

• Use consistent tab order across the site
• Ensure all tabs have roughly equal content
• Don't nest tabs inside tabs
• Use group prop for related tab sets that should sync