# PaneTabs

Source: /tuil/docs/reference/components/layout/pane-tabs
Locale: en

PaneTabs component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="Box" />

## API and events [#api-and-events]

Build capability-aware rows, columns, bounded containers, split panes, and keyboard-resizable regions.

```tsx
export function PaneTabs({
  labels,
  active,
  children,
}: PaneTabsProps): ReactNode;
```

### Props, functions, and events [#props-functions-and-events]

| Member     | Type                | Required | Description                                                | Related types |
| ---------- | ------------------- | -------- | ---------------------------------------------------------- | ------------- |
| `labels`   | `readonly string[]` | Yes      | The `labels` member uses the `readonly string[]` contract. | —             |
| `active`   | `number`            | Yes      | The `active` member uses the `number` contract.            | —             |
| `children` | `ReactNode`         | No       | The `children` member uses the `ReactNode` contract.       | —             |

`ResizablePane` reports size changes through `onSizeChange`; other layout components are passive.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

## Interaction and capabilities [#interaction-and-capabilities]

Resizable panes consume scoped arrow-key input while passive layout primitives only project Ink layout props.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

## Complete import [#complete-import]

```tsx
import { PaneTabs } from "@/components/tuil/primitives/box";
```