Primitives
ScrollArea
A bounded container that scrolls on the chosen axes
Vertical
Row 1Row 2Row 3Row 4Row 5Row 6Row 7Row 8Row 9Row 10Row 11Row 12Row 13Row 14
Horizontal
DeploymentBranchCommitStatusDurationTriggerAuthorLog
Usage
import { ScrollArea, Stack, Text } from "@gpuixui/primitives";
<ScrollArea axis="vertical" style={{ height: 240 }} padding="md" label="Rows">
<Stack direction="column" gap="sm">
{rows.map((row) => (
<Text role="body" key={row}>{row}</Text>
))}
</Stack>
</ScrollArea>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
axis | "vertical" | "horizontal" | "both" | "vertical" | which overflow axes are scroll; a stored name this release does not carry reads as the default, in the paint and in the keys (scrollAxis) |
onScroll | (event: EventPayload) => void | none | wheel/trackpad deltas |
onScrollChange | (event: EventPayload) => void | none | the absolute offset after any move |
onLayout | (event: EventPayload) => void | none | the scroller's painted box (width/height), reported on mount and on a size change; a composed ScrollAreaViewport defaults to it |
padding | spacing step | none | frame padding; it does not scroll |
radius | radius step | none | frame radius; the scroller is clipped by it, and a stored name this release does not carry paints no corner |
border | boolean | false | the frame's border role |
scrollbarColor | string | colors.scrollbar | the viewport thumb's colour |
scrollbarWidth | number | platform's | the viewport thumb's thickness in px |
focusable | boolean | true | whether the viewport is a tab stop |
label | string | "Scroll region" | names the region (role="group" + aria-label) |
style | StyleDesc | — | merged last on the frame; put the bounded size here |
className | string | — | Tailwind classes, joined last on the frame |
children | ReactNode | — | viewport content, or a composed ScrollAreaViewport |
testId | string | — | the frame's locator |
viewportTestId | string | — | the implicit viewport's locator |
viewportRef | Ref<PublicInstance> | — | the implicit viewport's element |
| Prop | Type | Default | Consequence |
|---|---|---|---|
ref | Ref<PublicInstance> | — | the scroller itself; scrollTo and scrollIntoView address this element |
Edit this page on GitHubpackages/primitives/docs/scroll-area.mdx