TabbedContainer

A tab strip joined to one content frame. It generalizes the raised file-tab geometry of Dockit's code-block tabs to arbitrary React content. Colors use neutral UIKit surface, ink and hairline tokens in light and dark themes.

<TabbedContainer
  aria-label="Spawn alternatives"
  activationMode="hover"
  items={[
    { value: "right", label: "Spawn right", children: <RightExample /> },
    { value: "below", label: "Spawn below", children: <BelowExample /> },
  ]}
/>

Use value and onValueChange for controlled selection, or defaultValue for uncontrolled selection. keepMounted defaults to true so inactive content keeps its local state; hidden panels are inert and absent from keyboard navigation. Set it false for disposable scenario branches. className styles the shell; contentClassName styles its panels.

Arrow keys, Home and End select and focus tabs. Every tab and panel has linked ARIA IDs. Long labels remain on one line in a horizontally scrollable strip. The layout controller examples use this container to fork commands from one shared starting layout.

Set activationMode="hover" to switch on mouse hover without moving keyboard focus. The default is click. Touch still selects by tapping, and click and keyboard controls work in both modes. The layout examples enable hover for quick comparisons.