# ScrollArea

Source: /tuil/docs/reference/components/layout/scroll-area
Locale: en

ScrollArea 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 ScrollArea({
  lines,
  height,
  offset = 0,
  label = "Scrollable content",
  id = "scroll-area",
  onOffsetChange,
  sticky,
}: ScrollAreaProps): ReactNode;
```

### Props, functions, and events [#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 [#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 { ScrollArea } from "@/components/tuil/primitives/box";
```