Layout · §4.2

Scroll area

A styled scrolling region.

Theme
Contrast
Language
Motion
Text size

Code

<ScrollArea className="h-56">…</ScrollArea>

Accessibility

  • Keyboard scrollable; thin, token-coloured scrollbars.

Usage

Do

  • Long lists inside fixed-height panels.

Don't

  • Don't nest scroll areas.

Platforms

Web
apps/web/components/ui/scroll-area.tsx, apps/web/components/ui/separator.tsx
iOS
ScrollView
Android
LazyColumn