Tabs — Plandalf docs

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.

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

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

Here’s content that’s only inside the second tab. This one has an icon.

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

<Tabs>
  <Tab title="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!");
        }
    }
    ```
  </Tab>
  <Tab title="Second tab" icon="leaf">
    Here's content that's only inside the second tab.
  </Tab>
  <Tab title="Third tab">
    Here's content that's only inside the third tab.
  </Tab>
</Tabs>

Plandalf implementation views

Use the browser SDK on static pages and website builders.

Use the React wrapper inside app routes and component trees.

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

<Tabs defaultTabIndex={0} borderBottom>
  <Tab title="HTML" icon="code">
    Use the browser SDK on static pages.
  </Tab>
  <Tab title="React" icon="bolt">
    Use the React wrapper inside app routes.
  </Tab>
  <Tab title="Agent" icon="sparkles">
    Ask the agent to pick the smallest working integration first.
  </Tab>
</Tabs>

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.

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

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

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

Same labels stay in sync

await plandalf.present("pro-plan");

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

Add a Plandalf checkout button for the pro-plan offer.

<Tabs defaultTabIndex={1} borderBottom>
  <Tab title="JavaScript" icon="js">
    Use the browser SDK when a page already has client-side JavaScript.
  </Tab>
  <Tab title="React" icon="react">
    Use the React wrapper when checkout belongs in a component tree.
  </Tab>
</Tabs>

<CodeGroup title="Same labels stay in sync" labels={["JavaScript", "React"]}>

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

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

</CodeGroup>

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.

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

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.

This tab group operates independently.

Selecting tabs here will not affect other tab groups.

<Tabs sync={false}>
  <Tab title="First tab">
    This tab group operates independently.
  </Tab>
  <Tab title="Second tab">
    Selecting tabs here will not affect other tab groups.
  </Tab>
</Tabs>

Tabs properties

Set these properties on the Tabs wrapper component.

defaultTabIndexnumberdefault: 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.

syncbooleandefault: 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.

borderBottomboolean

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.

titlestringrequired

The title of the tab. Short titles are easier to scan, and tabs with matching titles synchronize their selections.

idstring

A custom ID for the tab used for anchor linking. If not provided, it defaults to the same value as title.

iconstring

A Lucide icon name, common Mintlify icon name, URL to an icon, or relative path to an icon.

iconTypestring

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

labelsstring[]

Compatibility prop for imported MDX that supplies tab labels separately from child Tab titles.

idstring

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.

Code groups Switch code languages.

Views Switch reader context.

Tabs and code groups See shared sync patterns.