Components
Scroll-area

Scroll-area

The Scroll-area component enhances native scrolling with custom, cross-browser styling, providing a consistent and visually appealing experience across various browsers and devices. It ensures smooth, polished scrolling behavior while maintaining flexibility in design.

Documentation

Unit Revision

v1.0.50
v1.0.49
v1.0.48
v1.0.47
v1.0.46
v1.0.45
v1.0.44
v1.0.43
v1.0.42
v1.0.41
v1.0.40
v1.0.39
v1.0.38
v1.0.37
v1.0.36
v1.0.35
v1.0.34
v1.0.33
v1.0.32
v1.0.31
v1.0.30
v1.0.29
v1.0.28
v1.0.27
v1.0.26
v1.0.25
v1.0.24
v1.0.23
v1.0.22
v1.0.21
v1.0.20
v1.0.19
v1.0.18
v1.0.17
v1.0.16
v1.0.15
v1.0.14
v1.0.13
v1.0.12
v1.0.11
v1.0.10
v1.0.9
v1.0.8
v1.0.7
v1.0.6
v1.0.5
v1.0.4
v1.0.3
v1.0.2
v1.0.1

Additional Examples

Horizontal Scrolling

Photo by Ornella Binni
Photo by Ornella Binni
Photo by Tom Byrom
Photo by Tom Byrom
Photo by Vladimir Malyavko
Photo by Vladimir Malyavko

Configurable Props

<ScrollArea>

Prop

Type

Default/ Options

Description

type

enum

"hover"

Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.

  • "auto" means that scrollbars are visible when content is overflowing on the corresponding orientation.
  • "always" means that scrollbars are always visible regardless of whether the content is overflowing.
  • "scroll" means that scrollbars are visible when the user is scrolling along its corresponding orientation.
  • "hover" when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.

<ScrollBar>

Prop

Type

Default/ Options

Description

orientation

enum ("horizontal" | "vertical")

"vertical"

The orientation of the scrollbar

ResizableSelect