Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Fixed Height ScrollArea Scroll Area for React

A Notifications heading over ten rows, Notification 1 onward, inside a panel 200 pixels tall that scrolls.

Notifications heads a bordered panel 200 pixels tall. Inside are ten rows, Notification 1 onward, each with a number, a message and a relative time.

Fix the height when a list should not push the page down, such as a notification tray. A Popover can hold the same list off to the side. Base UI in React does not choose that height.

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

Anatomy

Scroll Area anatomy: root, viewport, content, scrollbar, thumb

Usage

<div className="flex w-full max-w-md flex-col gap-2">
  <h3 className="font-semibold text-sm">Notifications</h3>
  <ScrollArea className="h-[200px] rounded-md border bg-background">
    <div className="flex flex-col gap-4 p-4">
      {notifications.map((notification) => (
        <div className="flex items-start gap-3" key={notification.id}>
          <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
            <span className="font-medium text-primary text-xs">
              {notification.id}
            </span>
          </div>
          <div className="flex flex-1 flex-col gap-1">
            <p className="font-medium text-sm leading-none">
              {notification.title}
            </p>
            <p className="text-muted-foreground text-sm">
              {notification.message}
            </p>
            <p className="text-muted-foreground text-xs">
              {notification.time}
            </p>
          </div>
        </div>
      ))}
    </div>
  </ScrollArea>
</div>

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.

API Reference

Scroll Area

No extra props in this demo. The rest is on the Scroll Area page.

All 8 scroll area examples