Tabbed Layout – Code

Implementation
TabbedLayout Props
TabbedLayoutTab

Common Examples

To use the TabbedLayout, pass one or more tabs with a unique key, a localized label, and content. The kit forbids children.

import { TabbedLayout } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <TabbedLayout
      tabs={[
        { key: "a", label: "Summary", content: <Summary /> },
        { key: "b", label: "Details", content: <Details /> },
      ]}
    />
  );
}

Its primary home is the artifact region of an AppShell or Window. When the artifact is a drawer, the layout surfaces a close button wired through useAppSurface.

Display modes

stacked shows one panel at a time. vertical-split and horizontal-split show both panels. Splits are offered only with exactly two tabs and a component width of at least 720px. Below that, the layout forces stacked and hides the mode picker. The last chosen mode is restored when the layout grows past the threshold.Seed the starting mode with defaultMode. The layout coerces to stacked when a split is unavailable.

Single tab

A single tab shows neither a tab strip nor the mode menu — only its content. The drawer close button still appears when applicable.

Selection

Pass defaultSelectedKey for uncontrolled selection, or selectedKey with onSelectionChange to own it. Selection changes the visible panel only in stacked mode. Split modes show both panels.

Overflow and narrow widths

Extra tabs overflow the strip. Below 720px the layout stays stacked.

Split resize

Split modes include a drag handle between panes.

Internationalization

TabbedLayout owns these localized strings:

ai-kit.tabbedLayout.layoutOptions
ai-kit.tabbedLayout.layoutMenu
ai-kit.tabbedLayout.modeStacked
ai-kit.tabbedLayout.modeVerticalSplit
ai-kit.tabbedLayout.modeHorizontalSplit
ai-kit.tabbedLayout.close
ai-kit.tabbedLayout.resizePanes
ai-kit.tabbedLayout.tabs

Localize tab label values before passing them. Mount AiKitIntlProvider inside CartoTheme to switch the chrome strings.

React Accessibility

The tab strip is a labeled tablist. Split pane resize exposes a localized name.
Close appears only when the artifact is a drawer, and uses the localized close label.

<TabbedLayout
  tabs={tabs}
  defaultMode="stacked"
  selectedKey={key}
  onSelectionChange={setKey}
/>

`TabbedLayout` Props

The TabbedLayout accepts the following props and forwards remaining <div> attributes except children and style.

TabbedLayoutTab[]

required

One or more tabs. Split modes require exactly two.

string

Class merged onto the root element.

"stacked" | "vertical-split" | "horizontal-split"

default:"stacked"

Uncontrolled starting display mode. Coerced to stacked when a split is unavailable.

string

Uncontrolled selected tab at mount. Defaults to the first tab.

(key: string) => void

Fired when the user picks a tab, controlled or not.

string

Controlled selected tab. Pair with onSelectionChange.

const tab: TabbedLayoutTab = {
  key: "summary",
  label: "Summary",
  content: <Summary />,
};

`TabbedLayoutTab`

ReactNode

required

Panel content.

string

required

Stable identity. Must be unique within tabs.

string

required

Localized label for the strip and split pane heading.

AI Kit

Agent Experience

Tabbed Layout – Code

Common Examples

Display modes

Single tab

Selection

Overflow and narrow widths

Split resize

Internationalization

React Accessibility

`TabbedLayout` Props

`TabbedLayoutTab`

​Common Examples

​Display modes

​Single tab

​Selection

​Overflow and narrow widths

​Split resize

​Internationalization

​React Accessibility

​TabbedLayout Props

​TabbedLayoutTab

Common Examples

Display modes

Single tab

Selection

Overflow and narrow widths

Split resize

Internationalization

React Accessibility

`TabbedLayout` Props

`TabbedLayoutTab`