Scroll Area

Overlay

A scroll container with a styled, theme-aware scrollbar.

Scroll areas render a native scroll viewport with a custom scrollbar. The thumb inherits the muted theme color and stays subtle until you scroll or hover.

npx shadcn@latest add scroll-area

Vertical scroll

A fixed-height container that scrolls through long content.

Preview

Live

Vernacular architecture is building done outside any academic tradition, and without professional guidance. It is not a particular architectural movement or style, but rather a broad category, encompassing a wide range and variety of building types.

This type of architecture usually serves immediate, local needs, is constrained by the materials available in its particular region and reflects local traditions.

More recently, vernacular architecture has been examined by designers and the building industry in an effort to be more energy conscious with contemporary design.

The study of vernacular architecture does not examine formally schooled architects, but instead that of the design skills and tradition of local builders.

tsx

1<ScrollArea className="h-40 w-72 rounded-lg border">
2  <div className="flex flex-col gap-3 p-4 text-sm">
3    <p>Paragraph one</p>
4    <p>Paragraph two</p>
5  </div>
6</ScrollArea>

Composition

The scrollbar and thumb can be assembled independently.

Preview

Live

This type of architecture usually serves immediate, local needs, is constrained by the materials available in its particular region and reflects local traditions.

More recently, vernacular architecture has been examined by designers and the building industry in an effort to be more energy conscious with contemporary design.

The study of vernacular architecture does not examine formally schooled architects, but instead that of the design skills and tradition of local builders.

tsx

1<ScrollArea className="h-40 w-72 rounded-lg border">
2  <ScrollAreaViewport>...</ScrollAreaViewport>
3  <ScrollAreaScrollbar orientation="vertical">
4    <ScrollAreaThumb />
5  </ScrollAreaScrollbar>
6  <ScrollAreaCorner />
7</ScrollArea>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
className	string	Sets the fixed dimensions and frame styling of the root.
orientation	"vertical" \| "horizontal"= "vertical"	Scrollbar orientation.
overflowEdgeThreshold	number	Threshold in px before edge overflow is reported.
keepMounted	boolean= false	Keep the scrollbar in the DOM when not scrollable.