edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Scroll Area

Custom scrollbar container with cross-browser styling.

Componentsdocsbase-ui/scroll-area

Installation

npx shadcn@latest add https://ui.edbn.me/r/scroll-area.json

Manual

API Reference

Root

Groups all parts of the scroll area. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Viewport

The scrollable viewport area. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Scrollbar

A custom scrollbar that overlays the viewport. Renders a div element.

orientation'horizontal' | 'vertical'
='vertical'

Scrollbar direction

keepMountedboolean
=false

Keep in DOM when not scrollable

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Scrollbar data attributes
AttributeDescription
data-orientationScrollbar orientation
data-scrollingPresent while scrolling
Scrollbar CSS variables
VariableDescription
--scroll-area-thumb-heightCalculated thumb height (vertical)
--scroll-area-thumb-widthCalculated thumb width (horizontal)

Thumb

The draggable scrollbar thumb. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Corner

The corner between horizontal and vertical scrollbars. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function