◇

ScrollArea

10 parts

Provides a styleable, cross-browser scroll container that swaps native scrollbars for custom ones while preserving native scrolling, keyboard, and accessibility behaviour. The root holds shared state and renders nothing visible on its own — compose it with a ScrollAreaViewport (the scrollable region), one or two ScrollAreaScrollbars (each containing a ScrollAreaThumb), and an optional ScrollAreaCorner. Reach for it when the default OS scrollbars clash with your design or differ across platforms.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  ScrollAreaCorner,
  ScrollAreaRoot,
  ScrollAreaScrollbar,
  ScrollAreaScrollbarAuto,
  ScrollAreaScrollbarGlimpse,
  ScrollAreaScrollbarHover,
  ScrollAreaScrollbarScroll,
  ScrollAreaScrollbarVisible,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from '@robonen/primitives/display/scroll-area';

<ScrollAreaRoot>
  <ScrollAreaCorner />
  <ScrollAreaScrollbar />
  <ScrollAreaScrollbarAuto />
  <ScrollAreaScrollbarGlimpse />
  <ScrollAreaScrollbarHover />
  <ScrollAreaScrollbarScroll />
  <ScrollAreaScrollbarVisible />
  <ScrollAreaThumb />
  <ScrollAreaViewport />
</ScrollAreaRoot>

API Reference

ScrollAreaCorner

Corner

No props or events — renders its element and forwards attributes.

ScrollAreaRoot

Root

Provides a styleable, cross-browser scroll container that swaps native scrollbars for custom ones while preserving native scrolling, keyboard, and accessibility behaviour. The root holds shared state and renders nothing visible on its own — compose it with a `ScrollAreaViewport` (the scrollable region), one or two `ScrollAreaScrollbar`s (each containing a `ScrollAreaThumb`), and an optional `ScrollAreaCorner`. Reach for it when the default OS scrollbars clash with your design or differ across platforms.

Prop	Type	Default	Description
`type`?	`ScrollAreaType`	`'hover'`	Visibility behaviour for scrollbars. - `auto`: visible whenever content overflows. - `always`: always visible. - `scroll`: visible while the user is scrolling, then hides after `scrollHideDelay`. - `hover`: visible while the pointer is over the root, then hides after `scrollHideDelay`. - `glimpse`: briefly revealed when the pointer enters the root, then auto-hides; behaves like `scroll` once the user scrolls or interacts with the bar.
`dir`?	`'ltr' \| 'rtl'`	—	Reading direction. Inherits from `ConfigProvider` when omitted.
`scrollHideDelay`?	`number`	`600`	For `type='scroll'` and `type='hover'`, the time in ms before scrollbars hide after the user stops interacting.

ScrollAreaScrollbar

Scrollbar

A custom scrollbar track for one axis. It picks the appropriate visibility strategy from the root's `type` (`auto`, `always`, `scroll`, or `hover`) and renders the matching scrolling behaviour. Render one for each axis you want scrollable and place a `ScrollAreaThumb` inside it.

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	`'vertical'`	—
`forceMount`?	`boolean`	—	Keep mounted regardless of visibility state.

ScrollAreaScrollbarAuto

ScrollbarAuto

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`forceMount`?	`boolean`	—	—

ScrollAreaScrollbarGlimpse

ScrollbarGlimpse

A hybrid visibility strategy used for `type='glimpse'`: scrollbars briefly reveal themselves when the pointer enters the scroll area, then auto-hide after `scrollHideDelay`, and behave like `type='scroll'` once the user actually scrolls or interacts with the bar.

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`forceMount`?	`boolean`	—	—

ScrollAreaScrollbarHover

ScrollbarHover

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`forceMount`?	`boolean`	—	—

ScrollAreaScrollbarScroll

ScrollbarScroll

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`forceMount`?	`boolean`	—	—

ScrollAreaScrollbarVisible

ScrollbarVisible

No props or events — renders its element and forwards attributes.

ScrollAreaThumb

Thumb

No props or events — renders its element and forwards attributes.

ScrollAreaViewport

Viewport

The scrollable region that clips and natively scrolls its content while the OS scrollbars are visually hidden. Place all scrollable content inside it; it must be a child of `ScrollAreaRoot`.

Prop	Type	Default	Description
`nonce`?	`string`	—	Inline `nonce` attribute applied to the injected style tag (CSP support). Falls back to the `ConfigProvider` `nonce` when omitted.
`tabindex`?	`number`	`0`	`tabindex` applied to the scrollable region so keyboard users can focus the panel and arrow-scroll natively even when no scrollbar is interactive. Pass `-1`/`undefined` to opt out.