ScrollArea

A scroll container with custom scrollbars.

import { ScrollArea } from 'components/UI/ScrollArea'

Vertical

Use this for long content in a region with a fixed height, such as a list in a card or a sidebar. Move the pointer onto the area or scroll it to show the scrollbar.

Pageview on /pricing

Signed up

Created a dashboard

Invited a teammate

Watched a recording

Turned on a feature flag

Started an experiment

Sent a survey

Connected a data source

Ran a SQL query

Shared an insight

Exported a CSV

Upgraded the plan

Pageview on /docs

Horizontal

Set orientation="horizontal" on the scrollbar. The content grows to the width of its items.

Product analytics

Web analytics

Revenue

Retention

Signups

Errors

Experiments

Surveys

Edge fades

Use edge fades when the scrollbar is hidden and users may not see that the content scrolls. Set edgeFades on Viewport. An edge fades only while content continues past it.

Vertical

Trends

Funnels

Retention

Paths

Lifecycle

Stickiness

Revenue

Session replay

Horizontal

TrendsFunnelsRetentionPathsLifecycleStickinessRevenueSession replayTrendsFunnelsRetentionPathsLifecycleStickinessRevenueSession replay

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Give ScrollArea.Root a fixed height, such as h-40. A max height alone does not make it scroll.
Add a ScrollArea.Scrollbar for each direction that scrolls. Add ScrollArea.Corner when both directions scroll.

API

Props that the library adds. Every part also takes all the Base UI props.

ScrollArea.Viewport

Prop	Type	Default	Description
edgeFades	boolean	false	Adds 24px CSS masks at edges with more content. Supports both axes and RTL.