# Tabs
Use tabs to switch between implementation views such as HTML, React, API, and Agent.
Source: /docs/components/tabs
Last modified: 2026-06-20
Tabs are for a small set of mutually exclusive views. Use them when every reader needs one of the options, not when the content is optional.

## Implementation views

Mintlify tabs can contain any MDX component, including code blocks and icons.


### First tab


    Welcome to the content that you can only see inside the first tab.

    ```java title="HelloWorld.java"
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```


### Second tab


    Here's content that's only inside the second tab. This one has an [icon: leaf] icon.


### Third tab


    Here's content that's only inside the third tab.


````mdx title="tabs-basic.mdx"


### First tab


    Welcome to the content that you can only see inside the first tab.

    ```java title="HelloWorld.java"
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```


### Second tab


    Here's content that's only inside the second tab.


### Third tab


    Here's content that's only inside the third tab.


````

## Plandalf implementation views


### HTML


    Use the browser SDK on static pages and website builders.


### React


    Use the React wrapper inside app routes and component trees.


### Agent


    Ask the agent to pick the smallest working integration first, then add styling.


```mdx title="tabs.mdx"


### HTML


    Use the browser SDK on static pages.


### React


    Use the React wrapper inside app routes.


### Agent


    Ask the agent to pick the smallest working integration first.


```

## Synced tabs

Tabs sync by label by default. Use the same labels across a page when the reader chooses one stack and should stay in that stack.


### JavaScript


    Use the browser SDK when a page already has client-side JavaScript.


### React


    Use the React wrapper when checkout belongs in a component tree.


### Agent


    Ask the agent to install the smallest working integration, then add styling.


### Same labels stay in sync


```js title="present.js"
await plandalf.present("pro-plan");
```

```tsx title="CheckoutButton.tsx"
<button onClick={() => plandalf.present("pro-plan")}>Buy Pro</button>
```

```md title="agent-prompt.md"
Add a Plandalf checkout button for the pro-plan offer.
```


````mdx title="synced-tabs.mdx"


### JavaScript


    Use the browser SDK when a page already has client-side JavaScript.


### React


    Use the React wrapper when checkout belongs in a component tree.


### Same labels stay in sync


```js title="present.js"
await plandalf.present("pro-plan");
```

```tsx title="CheckoutButton.tsx"
<button onClick={() => plandalf.present("pro-plan")}>Buy Pro</button>
```


````

## Hashable tabs

Give each `Tab` an `id` when another page should link to a specific tab. The docs renderer opens the matching tab when the URL hash matches the tab ID.


### Hosted


    Link directly to `#hosted-checkout` when the hosted flow is the important option.


### Embedded


    Link directly to `#embedded-checkout` when the embedded flow is the important option.


## Unsynced tabs

Use `sync={false}` when repeated titles should not control other tabs or code groups on the page.


### First tab


    This tab group operates independently.


### Second tab


    Selecting tabs here will not affect other tab groups.


```mdx title="tabs-unsynced.mdx"


### First tab


    This tab group operates independently.


### Second tab


    Selecting tabs here will not affect other tab groups.


```

## Tabs properties

Set these properties on the `Tabs` wrapper component.


- `defaultTabIndex` (number; default: 0):
  The index of the tab to display by default, starting from `0`. For example, set this to `1` to show the second tab on page load.


- `sync` (boolean; default: true):
  When `true`, tabs synchronize with other tabs and code groups on the page that have matching titles. Set this to `false` to make a tab group independent.


- `borderBottom` (boolean):
  Adds a bottom border and padding to the tabs container. Use it when tabbed content needs stronger separation from the rest of the page.


## Tab properties

Set these properties on each individual `Tab` component.


- `title` (string; required):
  The title of the tab. Short titles are easier to scan, and tabs with matching titles synchronize their selections.


- `id` (string):
  A custom ID for the tab used for anchor linking. If not provided, it defaults to the same value as `title`.


- `icon` (string):
  A Lucide icon name, common Mintlify icon name, URL to an icon, or relative path to an icon.


- `iconType` (string):
  Imported icon style metadata, such as `regular`, `solid`, `light`, `thin`, `duotone`, or `brands`. Plandalf preserves this metadata through the shared docs icon layer.


## Plandalf extensions


- `labels` (string[]):
  Compatibility prop for imported MDX that supplies tab labels separately from child `Tab` titles.


- `id` (string):
  Optional root ID for the tab set. Use this only when a page needs a stable wrapper identifier.


## Authoring rules

- Use tabs when each reader chooses one path from a small set.
- Use `CodeGroup` for code-only language switching.
- Keep labels consistent when tabs and code groups should sync.
- Set `sync={false}` when two tab sets happen to share a label but should not control each other.
- Prefer `borderBottom` for compact Mintlify-style docs sections.

## Related components


  - [Code groups](/docs/components/tabs-code-groups#code-groups): Switch code languages.
  - [Views](/docs/components/disclosure-views#views): Switch reader context.
  - [Tabs and code groups](/docs/components/tabs-code-groups): See shared sync patterns.