Plandalf

Tabs and code groups

Use tabs and code groups for language, framework, platform, and implementation choices that should stay synchronized across a docs page.

Tabs and code groups let readers choose the version of an example that matches their stack. Matching labels synchronize by default, so choosing JavaScript in one place can keep later examples on JavaScript too.

Tabs

Use HTML when a static page, page builder, or pasted template owns the buying action.

Use React when checkout depends on route state, signed identity, or account UI.

Use an agent prompt when another tool will implement the first pass.

<Tabs defaultTabIndex={0} borderBottom>
  <Tab title="HTML" icon="code">
    Use HTML when a static page owns the buying action.
  </Tab>
  <Tab title="React" icon="blocks">
    Use React when checkout depends on route state.
  </Tab>
</Tabs>

Code groups

Open one offer

await window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal"
});
<button data-plandalf-present="offer_123" data-plandalf-frame="modal">
  Buy now
</button>

Use a dropdown when labels are long or the group has several options.

Framework wrappers

export function CheckoutButton() {
  return <button onClick={() => window.Plandalf.openOffer({ offerId: "offer_123" })}>Buy now</button>;
}
<button data-plandalf-present="offer_123">Buy now</button>

Tabs properties

Set these properties on the Tabs wrapper when the whole group needs a default state or sync behavior.

defaultTabIndexnumberdefault: 0

Selects the initially visible tab by zero-based index.

syncbooleandefault: true

Synchronizes tabs and code groups with matching labels across the page.

borderBottombooleandefault: false

Uses a compact bottom-border style that matches dense Mintlify docs sections.

Tab properties

Set these properties on each Tab.

titlestringrequired

The visible tab label. Reuse labels like HTML, React, and Agent when selections should stay synced across the page.

idstring

Stable anchor ID for deep-linking to a specific tab.

iconstring

Lucide icon name, Mintlify-compatible icon alias, image URL, or inline SVG string.

CodeGroup properties

Set these properties on CodeGroup when a set of fenced code blocks should behave as one language or framework selector.

childrenReactNoderequired

The fenced code blocks inside the group. Give every fence a language and title so the selector and code header stay readable.

labelsstring[]

Overrides labels inferred from fenced code titles or languages.

titlestring

Adds a compact heading to the code group.

syncbooleandefault: true

Controls synchronization with matching tabs and code groups.

Steps Put the language choice inside a clear sequence.
API fields and examples Attach request and response examples to an endpoint rail.

Feature detail