Tabs

Properties#

Tabs#

Prop	Type	Default	Description
`default`	`string`	—	Title of the tab that should be active on load. Matched case-insensitively against the `title` of each child. When omitted, the first tab is active.

Tab#

Prop	Type	Default	Description
`title`	`string`	required	Label shown in the tab header.
`id`	`string`	auto-generated	Unique identifier. Auto-generated from the title when not provided — usually fine to leave out.

Examples#

Basic Tabs#

Each tab can hold rich markdown — headings, lists, links, and emphasis.

Documentation

Generate beautiful, interactive API reference docs straight from your API document.

Try requests right in the browser
Auto-generated code samples
Full-text search across every endpoint

API Client

A standalone client for testing and debugging your APIs.

Save and organize requests
Environment variables and secrets
Works offline as a desktop app

Registry

Host and version your API documents in one place.

Share docs with your whole team
Automatic versioning on every push
Connect a custom domain

<scalar-tabs>
  <scalar-tab title="Documentation">
Generate beautiful, interactive API reference docs straight from your API document.
 
- Try requests right in the browser
- Auto-generated code samples
- Full-text search across every endpoint
  </scalar-tab>
  <scalar-tab title="API Client">
A standalone client for testing and debugging your APIs.
 
- Save and organize requests
- Environment variables and secrets
- Works offline as a desktop app
  </scalar-tab>
  <scalar-tab title="Registry">
Host and version your API documents in one place.
 
- Share docs with your whole team
- Automatic versioning on every push
- Connect a custom domain
  </scalar-tab>
</scalar-tabs>

<Tabs>
  <Tab title="Documentation">
    Generate beautiful, interactive API reference docs straight from your API document.
 
    - Try requests right in the browser
    - Auto-generated code samples
    - Full-text search across every endpoint
  </Tab>
  <Tab title="API Client">
    A standalone client for testing and debugging your APIs.
 
    - Save and organize requests
    - Environment variables and secrets
    - Works offline as a desktop app
  </Tab>
  <Tab title="Registry">
    Host and version your API documents in one place.
 
    - Share docs with your whole team
    - Automatic versioning on every push
    - Connect a custom domain
  </Tab>
</Tabs>

Default Tab#

The default prop matches the title of a child tab (case-insensitively).

Local

Pointing at your local server.

Production

Production is shown first.

<scalar-tabs default="Production">
  <scalar-tab title="Local">Pointing at your local server.</scalar-tab>
  <scalar-tab title="Production">Production is shown first.</scalar-tab>
</scalar-tabs>

<Tabs default="Production">
  <Tab title="Local">Pointing at your local server.</Tab>
  <Tab title="Production">Production is shown first.</Tab>
</Tabs>

Rich Components#

Tabs can hold any other component — cards, callouts, images, and more.

Cards

Fast

Renders instantly, even for large API documents.

Themeable

Match your brand with CSS variables and design tokens.

Callout

Anything you can write on a page works inside a tab.

Image

The Scalar team at work

<Tabs>
  <Tab title="Cards">
    <Row cols={2}>
      <Card title="Fast" icon="phosphor/regular/lightning">
        Renders instantly, even for large API documents.
      </Card>
      <Card title="Themeable" icon="phosphor/regular/palette">
        Match your brand with CSS variables and design tokens.
      </Card>
    </Row>
  </Tab>
  <Tab title="Callout">
    <Callout type="info">
      Anything you can write on a page works inside a tab.
    </Callout>
  </Tab>
  <Tab title="Image">
    <Image src="/marc-cam-scalar.jpg" alt="The Scalar team at work" />
  </Tab>
</Tabs>

Updated Sep 24, 2026