Explorer

Scroll Area

Native scroll area with custom scrollbars and edge cues.

Componentsdocsbase-ui/scroll-area

Installation

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

Manual

API Reference

ScrollArea

Composed edbn/ui wrapper around Base UI Root, Viewport, Content, Scrollbar, Thumb, and Corner.

childrenReact.ReactNode

Scrollable content rendered inside ScrollAreaContent.

orientation'vertical' | 'horizontal' | 'both'

='vertical'

Which scroll axes are wired with scrollbars and cues.

scrollFadeboolean

=true

Render non-interactive edge fades for hidden content.

chevronboolean

=true

Render the small edge chevron inside each fade cue.

cueSize'tight' | 'comfortable'

='comfortable'

Visual size of each edge fade cue.

viewportClassNamestring

Class name applied to the composed viewport part.

contentClassNamestring

Class name applied to the composed content part.

overflowEdgeThresholdnumber | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number }>

=8

Pixels that must be passed before edge cues appear in the composed wrapper.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Root

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

overflowEdgeThresholdnumber | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number }>

=0

Pixels that must be passed before Base UI applies overflow edge attributes.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Root data attributes
Attribute	Description
data-scrolling	Present while the viewport is scrolling.
data-has-overflow-x	Present when horizontal overflow exists.
data-has-overflow-y	Present when vertical overflow exists.
data-overflow-x-start	Present when content is hidden past the horizontal start edge.
data-overflow-x-end	Present when content is hidden past the horizontal end edge.
data-overflow-y-start	Present when content is hidden above the viewport.
data-overflow-y-end	Present when content is hidden below the viewport.

Root CSS variables
Variable	Description
--scroll-area-corner-height	Height reserved for the corner where both scrollbars meet.
--scroll-area-corner-width	Width reserved for the corner where both scrollbars meet.

Viewport

The native scrollable viewport. Renders a div element.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Viewport data attributes
Attribute	Description
data-scrolling	Present while the viewport is scrolling.
data-has-overflow-x	Present when horizontal overflow exists.
data-has-overflow-y	Present when vertical overflow exists.
data-overflow-x-start	Present when content is hidden past the horizontal start edge.
data-overflow-x-end	Present when content is hidden past the horizontal end edge.
data-overflow-y-start	Present when content is hidden above the viewport.
data-overflow-y-end	Present when content is hidden below the viewport.

Viewport CSS variables
Variable	Description
--scroll-area-overflow-x-start	Horizontal start overflow amount in pixels.
--scroll-area-overflow-x-end	Horizontal end overflow amount in pixels.
--scroll-area-overflow-y-start	Vertical start overflow amount in pixels.
--scroll-area-overflow-y-end	Vertical end overflow amount in pixels.

Content

Container measured by Base UI for overflow and scrollbar thumb sizing.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Content data attributes
Attribute	Description
data-scrolling	Present while the viewport is scrolling.
data-has-overflow-x	Present when horizontal overflow exists.
data-has-overflow-y	Present when vertical overflow exists.
data-overflow-x-start	Present when content is hidden past the horizontal start edge.
data-overflow-x-end	Present when content is hidden past the horizontal end edge.
data-overflow-y-start	Present when content is hidden above the viewport.
data-overflow-y-end	Present when content is hidden below the viewport.

Content CSS variables
Variable	Description
--scroll-area-overflow-x-start	Horizontal start overflow amount in pixels.
--scroll-area-overflow-x-end	Horizontal end overflow amount in pixels.
--scroll-area-overflow-y-start	Vertical start overflow amount in pixels.
--scroll-area-overflow-y-end	Vertical end overflow amount in pixels.

Scrollbar

A vertical or horizontal custom scrollbar. Renders a div element.

orientation'vertical' | 'horizontal'

='vertical'

Scrollbar axis controlled by this part.

keepMountedboolean

=false

Keep the scrollbar element mounted when its viewport is not scrollable.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Scrollbar data attributes
Attribute	Description
data-scrolling	Present while the viewport is scrolling.
data-has-overflow-x	Present when horizontal overflow exists.
data-has-overflow-y	Present when vertical overflow exists.
data-overflow-x-start	Present when content is hidden past the horizontal start edge.
data-overflow-x-end	Present when content is hidden past the horizontal end edge.
data-overflow-y-start	Present when content is hidden above the viewport.
data-overflow-y-end	Present when content is hidden below the viewport.
data-hovering	Present while the scroll area is hovered.
data-orientation	Scrollbar orientation: vertical or horizontal.

Scrollbar CSS variables
Variable	Description
--scroll-area-thumb-height	Calculated thumb height for vertical scrolling.
--scroll-area-thumb-width	Calculated thumb width for horizontal scrolling.

Thumb

The draggable part of a scrollbar that indicates scroll position.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Thumb data attributes
Attribute	Description
data-orientation	Thumb orientation: vertical or horizontal.

Corner

The small rectangle at the intersection of horizontal and vertical scrollbars.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

EdgeCue

Optional edbn/ui fade utility used by the composed ScrollArea wrapper.

edge'top' | 'bottom' | 'left' | 'right'Required

Viewport edge where the cue is positioned.

cueSize'tight' | 'comfortable'

='comfortable'

Visual size of the fade cue.

chevronboolean

=true

Render the small chevron inside the fade cue.

visibleboolean

Force cue visibility. When omitted, Base UI overflow data attributes drive visibility.

classNamestring

CSS class name.

styleReact.CSSProperties

Inline style object.

EdgeCue data attributes
Attribute	Description
data-edge	The edge where the cue is rendered.
data-visible	Set to true when visibility is forced with the prop.

edbn/ui

Explorer

Scroll Area

Native scroll area with custom scrollbars and edge cues.

Componentsdocsbase-ui/scroll-area

Installation

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

Manual

API Reference

ScrollArea

Composed edbn/ui wrapper around Base UI Root, Viewport, Content, Scrollbar, Thumb, and Corner.

childrenReact.ReactNode

Scrollable content rendered inside ScrollAreaContent.

orientation'vertical' | 'horizontal' | 'both'

='vertical'

Which scroll axes are wired with scrollbars and cues.

scrollFadeboolean

=true

Render non-interactive edge fades for hidden content.

chevronboolean

=true

Render the small edge chevron inside each fade cue.

cueSize'tight' | 'comfortable'

='comfortable'

Visual size of each edge fade cue.

viewportClassNamestring

Class name applied to the composed viewport part.

contentClassNamestring

Class name applied to the composed content part.

overflowEdgeThresholdnumber | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number }>

=8

Pixels that must be passed before edge cues appear in the composed wrapper.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Root

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

overflowEdgeThresholdnumber | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number }>

=0

Pixels that must be passed before Base UI applies overflow edge attributes.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Root data attributes
Attribute	Description
data-scrolling	Present while the viewport is scrolling.
data-has-overflow-x	Present when horizontal overflow exists.
data-has-overflow-y	Present when vertical overflow exists.
data-overflow-x-start	Present when content is hidden past the horizontal start edge.
data-overflow-x-end	Present when content is hidden past the horizontal end edge.
data-overflow-y-start	Present when content is hidden above the viewport.
data-overflow-y-end	Present when content is hidden below the viewport.

Root CSS variables
Variable	Description
--scroll-area-corner-height	Height reserved for the corner where both scrollbars meet.
--scroll-area-corner-width	Width reserved for the corner where both scrollbars meet.

Viewport

The native scrollable viewport. Renders a div element.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Viewport data attributes
Attribute	Description
data-scrolling	Present while the viewport is scrolling.
data-has-overflow-x	Present when horizontal overflow exists.
data-has-overflow-y	Present when vertical overflow exists.
data-overflow-x-start	Present when content is hidden past the horizontal start edge.
data-overflow-x-end	Present when content is hidden past the horizontal end edge.
data-overflow-y-start	Present when content is hidden above the viewport.
data-overflow-y-end	Present when content is hidden below the viewport.

Viewport CSS variables
Variable	Description
--scroll-area-overflow-x-start	Horizontal start overflow amount in pixels.
--scroll-area-overflow-x-end	Horizontal end overflow amount in pixels.
--scroll-area-overflow-y-start	Vertical start overflow amount in pixels.
--scroll-area-overflow-y-end	Vertical end overflow amount in pixels.

Content

Container measured by Base UI for overflow and scrollbar thumb sizing.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Content data attributes
Attribute	Description
data-scrolling	Present while the viewport is scrolling.
data-has-overflow-x	Present when horizontal overflow exists.
data-has-overflow-y	Present when vertical overflow exists.
data-overflow-x-start	Present when content is hidden past the horizontal start edge.
data-overflow-x-end	Present when content is hidden past the horizontal end edge.
data-overflow-y-start	Present when content is hidden above the viewport.
data-overflow-y-end	Present when content is hidden below the viewport.

Content CSS variables
Variable	Description
--scroll-area-overflow-x-start	Horizontal start overflow amount in pixels.
--scroll-area-overflow-x-end	Horizontal end overflow amount in pixels.
--scroll-area-overflow-y-start	Vertical start overflow amount in pixels.
--scroll-area-overflow-y-end	Vertical end overflow amount in pixels.

Scrollbar

A vertical or horizontal custom scrollbar. Renders a div element.

orientation'vertical' | 'horizontal'

='vertical'

Scrollbar axis controlled by this part.

keepMountedboolean

=false

Keep the scrollbar element mounted when its viewport is not scrollable.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Scrollbar data attributes
Attribute	Description
data-scrolling	Present while the viewport is scrolling.
data-has-overflow-x	Present when horizontal overflow exists.
data-has-overflow-y	Present when vertical overflow exists.
data-overflow-x-start	Present when content is hidden past the horizontal start edge.
data-overflow-x-end	Present when content is hidden past the horizontal end edge.
data-overflow-y-start	Present when content is hidden above the viewport.
data-overflow-y-end	Present when content is hidden below the viewport.
data-hovering	Present while the scroll area is hovered.
data-orientation	Scrollbar orientation: vertical or horizontal.

Scrollbar CSS variables
Variable	Description
--scroll-area-thumb-height	Calculated thumb height for vertical scrolling.
--scroll-area-thumb-width	Calculated thumb width for horizontal scrolling.

Thumb

The draggable part of a scrollbar that indicates scroll position.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

Thumb data attributes
Attribute	Description
data-orientation	Thumb orientation: vertical or horizontal.

Corner

The small rectangle at the intersection of horizontal and vertical scrollbars.

classNamestring | ((state) => string)

CSS class name or state-based class name callback.

styleReact.CSSProperties | ((state) => React.CSSProperties)

Inline style object or state-based style callback.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function used by Base UI.

EdgeCue

Optional edbn/ui fade utility used by the composed ScrollArea wrapper.

edge'top' | 'bottom' | 'left' | 'right'Required

Viewport edge where the cue is positioned.

cueSize'tight' | 'comfortable'

='comfortable'

Visual size of the fade cue.

chevronboolean

=true

Render the small chevron inside the fade cue.

visibleboolean

Force cue visibility. When omitted, Base UI overflow data attributes drive visibility.

classNamestring

CSS class name.

styleReact.CSSProperties

Inline style object.

EdgeCue data attributes
Attribute	Description
data-edge	The edge where the cue is rendered.
data-visible	Set to true when visibility is forced with the prop.