ReferenceComponentsLayout and panes
ScrollArea
ScrollArea component API, behavior, and executable example.
Loading executable example…
API and events
Build capability-aware rows, columns, bounded containers, split panes, and keyboard-resizable regions.
export function ScrollArea({
lines,
height,
offset = 0,
label = "Scrollable content",
id = "scroll-area",
onOffsetChange,
sticky,
}: ScrollAreaProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
lines | readonly string[] | Yes | The lines member uses the readonly string[] contract. | — |
height | number | Yes | The height member uses the number contract. | — |
offset | number | undefined | No | The offset member uses the number | undefined contract. | — |
label | string | undefined | No | The label member uses the string | undefined contract. | — |
id | string | undefined | No | The id member uses the string | undefined contract. | — |
onOffsetChange | ((offset: number) => void | Promise<void>) | undefined | No | The onOffsetChange member uses the ((offset: number) => void | Promise<void>) | undefined contract. | — |
sticky | "top" | "bottom" | undefined | No | The sticky member uses the "top" | "bottom" | undefined 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
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
import { ScrollArea } from "@/components/tuil/primitives/box";