Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scroll Area examples · Standard

Basic ScrollArea Scroll Area for React

A basic vertical scroll area for long text, such as terms of service.

Framework
UI library

Long legal text and documentation can make a page endless. This example puts Terms of Service in a Scroll Area with a fixed height (h-72), so the text scrolls inside its border once it overflows and the rest of the page stays put. The scrollbar follows your theme in light and dark mode. Use it for terms, privacy policies, changelogs, and help text that should not dominate the layout.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Why does this terms list scroll?

ScrollArea has h-72, so the box is shorter than the seven paragraphs inside it. A scroll area scrolls when its box is smaller than the content. The width is w-full max-w-md.

Where is the padding?

On the inner div, as p-4, so it scrolls with the terms. The heading is an h4 with mb-4, and the paragraphs are flex flex-col gap-4 with text-sm text-muted-foreground.

What draws the frame?

rounded-md border on ScrollArea. This file adds no background class. The heading text is "Terms of Service".

How do I change the scrollbar?

The frame classes live on ScrollArea. The thumb lives in the scroll-area file under components/ui. The thumb is data-slot scroll-area-thumb. ScrollBar is the part around it. This file uses the vertical bar the root already renders.

How do I make the terms area taller?

Change h-72 on ScrollArea. A larger height class shows more paragraphs before they scroll. The inner p-4 and the gap-4 between paragraphs stay the same.

Is the heading inside the scroller?

Yes. The h4 is inside the padded div, so it scrolls away with the first paragraphs. Put the heading before ScrollArea when it should stay put.

All 8 scroll area examples