ScrollArea

Usable scrolling with thin overlay scrollbars, without hiding content or controls.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add scroll-area

Dependencies

What add scroll-area installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

3 examples · 1 component

Vertical list

A fixed-height list named with aria-label.

Aurora

Basalt

Cirrus

Dune

Ember

Fjord

Glacier

Horizontal row

orientation="horizontal" for a row of cards.

[09:00:12] INFO  worker-0 processed batch 1200 in 40ms — queue=default region=eu-west-1 retries=0
[09:01:12] INFO  worker-1 processed batch 1201 in 43ms — queue=default region=eu-west-1 retries=0
[09:02:12] INFO  worker-2 processed batch 1202 in 46ms — queue=default region=eu-west-1 retries=0
[09:03:12] INFO  worker-0 processed batch 1203 in 49ms — queue=default region=eu-west-1 retries=0
[09:04:12] INFO  worker-1 processed batch 1204 in 52ms — queue=default region=eu-west-1 retries=0
[09:05:12] INFO  worker-2 processed batch 1205 in 55ms — queue=default region=eu-west-1 retries=0
[09:06:12] INFO  worker-0 processed batch 1206 in 58ms — queue=default region=eu-west-1 retries=0
[09:07:12] INFO  worker-1 processed batch 1207 in 61ms — queue=default region=eu-west-1 retries=0
[09:08:12] INFO  worker-2 processed batch 1208 in 64ms — queue=default region=eu-west-1 retries=0
[09:09:12] INFO  worker-0 processed batch 1209 in 67ms — queue=default region=eu-west-1 retries=0
[09:10:12] INFO  worker-1 processed batch 1210 in 70ms — queue=default region=eu-west-1 retries=0
[09:11:12] INFO  worker-2 processed batch 1211 in 73ms — queue=default region=eu-west-1 retries=0
[09:12:12] INFO  worker-0 processed batch 1212 in 76ms — queue=default region=eu-west-1 retries=0
[09:13:12] INFO  worker-1 processed batch 1213 in 79ms — queue=default region=eu-west-1 retries=0
[09:14:12] INFO  worker-2 processed batch 1214 in 82ms — queue=default region=eu-west-1 retries=0
[09:15:12] INFO  worker-0 processed batch 1215 in 85ms — queue=default region=eu-west-1 retries=0
[09:16:12] INFO  worker-1 processed batch 1216 in 88ms — queue=default region=eu-west-1 retries=0
[09:17:12] INFO  worker-2 processed batch 1217 in 91ms — queue=default region=eu-west-1 retries=0
[09:18:12] INFO  worker-0 processed batch 1218 in 94ms — queue=default region=eu-west-1 retries=0
[09:19:12] INFO  worker-1 processed batch 1219 in 97ms — queue=default region=eu-west-1 retries=0
[09:20:12] INFO  worker-2 processed batch 1220 in 100ms — queue=default region=eu-west-1 retries=0
[09:21:12] INFO  worker-0 processed batch 1221 in 103ms — queue=default region=eu-west-1 retries=0
[09:22:12] INFO  worker-1 processed batch 1222 in 106ms — queue=default region=eu-west-1 retries=0
[09:23:12] INFO  worker-2 processed batch 1223 in 109ms — queue=default region=eu-west-1 retries=0

Both directions

Wide and tall content; both scrollbars and the corner.

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`orientation` Which scrollbars render; both adds the corner.	`"vertical" \| "horizontal" \| "both"`	`"vertical"`
`className` Size the root (h-72, max-h-96…); the viewport fills it.	`string`	—
`overflowEdgeThreshold` Pixels before data-overflow-*-start/end flip, for fade edges.	`number`	`0`
`ScrollBar` Exported for custom layouts; decorative (aria-hidden).	`div`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Idle	Scrollbars hidden; content fully visible.
Hover / scrolling	Thin scrollbar fades in.
Focus	Inset outline on the viewport when it is focusable.
No overflow	No scrollbar and no tab stop.

Accessibility

Scrolling stays native: wheel, touch, keyboard and assistive tech work as in any overflow container.

The viewport becomes focusable only when it overflows, so keyboard users can scroll it with the arrow keys even when it has no focusable content (a gap in Safari's native behavior).

Pass aria-label (or aria-labelledby) when it holds a list or other meaningful content: the root then becomes a named region. The scrollbars are decorative.

Overlay scrollbars never cover content: they show on hover or while scrolling and the thumb uses the border token.