# Tabs and code groups
Use tabs and code groups for language, framework, platform, and implementation choices that should stay synchronized across a docs page.
Source: /docs/components/tabs-code-groups
Last modified: 2026-06-20
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.


> **Use sync for repeated implementation choices**
>

  If a page teaches HTML, React, and Agent paths, reuse the same labels across `Tabs` and `CodeGroup`. Turn sync off only when the examples are unrelated.


## Tabs


### HTML


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


### React


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


### Agent


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


```mdx title="tabs.mdx"


### HTML


    Use HTML when a static page owns the buying action.


### React


    Use React when checkout depends on route state.


```

## Code groups


### Open one offer


```js title="open-offer.js"
await window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal"
});
```

```html title="button.html"
<button data-plandalf-present="offer_123" data-plandalf-frame="modal">
  Buy now
</button>
```


## Dropdown groups

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


### Framework wrappers


```tsx title="CheckoutButton.tsx"
export function CheckoutButton() {
  return <button onClick={() => window.Plandalf.openOffer({ offerId: "offer_123" })}>Buy now</button>;
}
```

```html title="checkout-button.html"
<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.


- `defaultTabIndex` (number; default: 0):
  Selects the initially visible tab by zero-based index.


- `sync` (boolean; default: true):
  Synchronizes tabs and code groups with matching labels across the page.


- `borderBottom` (boolean; default: false):
  Uses a compact bottom-border style that matches dense Mintlify docs sections.


## Tab properties

Set these properties on each `Tab`.


- `title` (string; required):
  The visible tab label. Reuse labels like `HTML`, `React`, and `Agent` when selections should stay synced across the page.


- `id` (string):
  Stable anchor ID for deep-linking to a specific tab.


- `icon` (string):
  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.


- `children` (ReactNode; required):
  The fenced code blocks inside the group. Give every fence a language and title so the selector and code header stay readable.


- `labels` (string[]):
  Overrides labels inferred from fenced code titles or languages.


- `title` (string):
  Adds a compact heading to the code group.


- `dropdown` (boolean; default: false):
  Renders a select menu instead of inline tabs.


- `sync` (boolean; default: true):
  Controls synchronization with matching tabs and code groups.


## Related components


  - [Steps](/docs/components/steps): Put the language choice inside a clear sequence.
  - [API fields and examples](/docs/components/api-fields-examples): Attach request and response examples to an endpoint rail.