Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scroll Area examples · Layout

Fixed Height ScrollArea Scroll Area for React

A notification list in a 200px scroll area that keeps the panel's height fixed.

Framework
UI library

Long lists need boundaries. This example puts ten notifications under a Notifications heading in a Scroll Area with h-[200px], so about three are visible and the rest scroll inside the border. However many notifications arrive, the panel keeps its height and nothing below it moves. Use it for notification panels, activity feeds, sidebar widgets, and dashboard cards.

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

What keeps the panel the same height?

ScrollArea has h-[200px], so ten notifications scroll inside that box. The list can grow and the panel stays 200px. The heading "Notifications" is outside the area, so it does not scroll.

What are the frame classes?

rounded-md border bg-background on ScrollArea. The inner wrapper is flex flex-col gap-4 p-4, so the gap and the padding scroll with the rows.

How is one notification laid out?

A row with flex items-start gap-3. The mark is a size-8 shrink-0 circle, rounded-full bg-primary/10, with the id in text-xs text-primary. The title, message, and time stack in flex-1 with gap-1.

What type size is the time?

The title is text-sm and font-medium. The message is text-sm text-muted-foreground. The time is text-xs text-muted-foreground, and it reads "1 minutes ago" through "10 minutes ago" from the item index.

How many notifications are in the file?

Ten. They are built with Array.from and keyed by id. Each message is "This is a notification message for item" plus that id.

Which scrollbar does this panel use?

The vertical one. The fixed height is what gives it something to scroll. This file does not render a second bar. The root already renders a vertical ScrollBar. Add another with orientation horizontal only when the content is wider than the box.

All 8 scroll area examples