Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Features

  • Scrollbar sits on top of the scrollable content, taking up no space.
  • Scrolling is native; no underlying position movements via CSS transformations.
  • Shims pointer behaviors only when interacting with the controls, so keyboard controls are unaffected.
  • Supports Right to Left direction.

Install

Import

API

Root

Props Type Default
as
AsTag | Component
div
asChild
boolean
false
dir
Direction
ltr
scrollHideDelay
number
600
type
ScrollType
hover

Viewport

Props Type Default
as
AsTag | Component
div
asChild
boolean
false

Scrollbar

Props Type Default
as
AsTag | Component
div
asChild
boolean
false
forceMount
boolean
false
orientation
'vertical' | 'horizontal'
vertical
Data attribute Value
[data-state]
'visible' | 'hidden'
[data-orientation]
'vertical' | 'horizontal'

Thumb

Props Type Default
as
AsTag | Component
div
asChild
boolean
false
Data attribute Value
[data-state]
'visible' | 'hidden'

Corner

Props Type Default
as
AsTag | Component
div
asChild
boolean
false