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 |