ScrollArea

A scrolling region of bounded height or width.

Group: Layout · Kind: macro · in the lite catalog

Preview

example

Issue 1

1h

Issue 2

2h

Issue 3

3h

Issue 4

4h

Issue 5

5h

Issue 6

6h

Issue 7

7h

Issue 8

8h

direction · horizontal

Issue 1

1h

Issue 2

2h

Issue 3

3h

Issue 4

4h

Issue 5

5h

Issue 6

6h

Issue 7

7h

Issue 8

8h

direction · both

Issue 1

1h

Issue 2

2h

Issue 3

3h

Issue 4

4h

Issue 5

5h

Issue 6

6h

Issue 7

7h

Issue 8

8h

Open in the playground

Platforms

The same specimen painted by React, SwiftUI, Compose and gpui.

Props

Prop	Type	Required	Bindable	Description
direction	vertical | horizontal | both	–	–	Which axis scrolls. Default "vertical".
maxHeight	number	–	–	Px it scrolls within; omit to fill the parent.
style	style	–	–	Extra Box styles merged over the region’s own.

Events

None.

Slots

None.

Children

many

A2UI basic mapping

No basic catalog component maps here.

Built from

Box

Accessibility

Role: region

region (scrollable, focusable when it overflows)

Keys	Action
–	Arrow keys, PageUp/PageDown, Home/End scroll while focused

Theming

Recipe parts: ScrollArea/root

Keyed by: :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Related

Box · Stack · Grid · Card · Separator · List · Resizable · Sidebar