ScrollArea
A token-styled scroll viewport built on @radix-ui/react-scroll-area. The
scrollbars match the design palette (--color-text-muted thumb on
--color-panel-2 track) and behave the same across platforms instead of
deferring to the OS default.
Default#
Vertical scroll. Default type="hover" — the scrollbar fades in only when
the pointer is over the area.
Loading…
Horizontal#
Pass orientation="horizontal" for a single horizontal scrollbar, or
"both" to render both axes (the corner cap is drawn automatically).
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| type | enum | hover | Scrollbar visibility behavior. Default `'hover'`. |
| orientation | enum | vertical | Which scrollbars to render. Default `'vertical'`. |
| scrollHideDelay | number | undefined | 600 | Time in ms before scrollbar hides after the last interaction (auto/scroll/hover). |
| viewportClassName | string | undefined | — | Class applied to the inner viewport rather than the outer root. |
| viewportRef | Ref<HTMLDivElement> | undefined | — | Ref to the inner viewport (the scrollable element). Useful when a consumer wants to drive scroll position imperatively without losing the outer-root ref forwarded as `ref`. |
| dir | enum | — | Document direction for RTL handling. |