ScrollArea
A scroll container with styled, slim scrollbars and overflow shadows
Category: layout · WCAG 2.2-AA · scroll, overflow, scrollbar, container, layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
height | string | — | Max block size of the container (any CSS length) |
width | string | — | Max inline size of the container (any CSS length) |
orientation | 'vertical' | 'horizontal' | 'both' | vertical | Which axes may scroll |
edges | 'shadow' | 'mask' | 'none' | shadow | Edge affordance: box-shadow, a mask-image fade, or none |
children | ReactNode | — | Scrollable content |
Design tokens
--cascivo-color-border--cascivo-color-surface--cascivo-color-text--cascivo-color-text-subtle--cascivo-radius-control--cascivo-scroll-area-height--cascivo-scroll-area-width
When to use
- Constraining a region to a fixed height/width with overflow scrolling
- Giving long lists, tables, or code blocks consistent slim scrollbars across browsers
- Signalling more content with subtle top/bottom scroll shadows
When not to use
- Whole-page scrolling — let the document scroll naturally
- Content that should determine its own height — do not cap it
How to build an accessible ScrollArea in React →
Examples
Vertical scroll
<ScrollArea height="12rem">
<p>Long content…</p>
</ScrollArea>Both axes
<ScrollArea height="12rem" width="20rem" orientation="both">
<table>…</table>
</ScrollArea>Related components
- Separator — Often divides items inside a scrolled list