Scroll Area

A scroller whose thin bars appear while it is hovered or moving, with an optional fade on the edges there is more past.

01Preview

01

TodayTrip plan for Lisbon
TodayFix flaky login test
YesterdayRewrite the pricing FAQ
YesterdayExplain CSS containment
MonBirthday gift ideas
MonDraft quarterly update
SunSourdough starter help
SatCompare three laptops
FriRegex for postcodes
ThuOnboarding email copy

02Installation

npx shadcn@latest add https://aiellie.app/r/scroll-area.json

03API reference

06

From the Base UI documentation

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

Props

Prop	Type	Default	Description
overflowEdgeThreshold	number \| Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number }>	0	The threshold in pixels that must be passed before the overflow edge attributes are applied. Accepts a single number for all edges or an object to configure them individually.
className	string \| ((state: ScrollArea.Root.State) => string \| undefined)	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	React.CSSProperties \| ((state: ScrollArea.Root.State) => React.CSSProperties \| undefined)	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	ReactElement \| ((props: HTMLProps, state: ScrollArea.Root.State) => ReactElement)	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Data Attributes

Attribute	Type	Description
data-has-overflow-x	-	Present when the scroll area content is wider than the viewport.
data-has-overflow-y	-	Present when the scroll area content is taller than the viewport.
data-overflow-x-end	-	Present when there is overflow on the horizontal end side.
data-overflow-x-start	-	Present when there is overflow on the horizontal start side.
data-overflow-y-end	-	Present when there is overflow on the vertical end side.
data-overflow-y-start	-	Present when there is overflow on the vertical start side.
data-scrolling	-	Present when the user scrolls inside the scroll area.

CSS Variables

Variable	Type	Description
--scroll-area-corner-height	number	The scroll area's corner height.
--scroll-area-corner-width	number	The scroll area's corner width.