Shadcn Scroll Area Components

Shadcn Scroll Area Component

The Shadcn Scroll Area is a container with a fixed height or width that scrolls its content while showing a thin, custom styled scrollbar. It keeps long lists, chat histories and side panels inside their box, so the rest of the layout stays in place, and it looks the same on every browser and operating system.

A chat thread that jumps to the newest message, notifications with sticky date headers, a sideways row of avatars and a privacy policy inside a sheet show where a shadcn scroll area earns its place. Radix UI and Base UI both provide the primitive underneath, which keeps native scrolling and draws the custom scrollbar on top, and the styling comes from shadcn/ui, React and Tailwind CSS.

What is the Shadcn Scroll Area Component?

The shadcn/ui scroll area wraps your content in a viewport element that uses the browser's real scrolling, then hides the default scrollbar and draws its own track and thumb. Because scrolling stays native, touch gestures, trackpad momentum, mouse wheels and keyboard scrolling all behave as users expect, and the thumb size and position are kept in sync with the content.

Use a scroll area when a region of the page must have a fixed size and its own scrollbar, such as a sidebar list or a message thread. If the whole page scrolls, the browser scrollbar is enough. To show only part of a long text with a Show more toggle, a Collapsible is simpler, and for sliding through cards one at a time, use a Carousel.

Anatomy of the Shadcn Scroll Area

6 Shadcn Scroll Area Variants

Each scroll area variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic list: A bordered box with a Tags heading and fifty version tags divided by separators, the classic vertical example.
• With sheet: A long privacy policy inside a side sheet. The sheet is a flex column and the ScrollArea uses min-h-0 and flex-1, so the header and policy text scroll inside the panel instead of overflowing the screen.
• User list: A scrolling list of users with avatars, names and email addresses in a fixed height panel.
• Sticky header: Notifications grouped by date, with each date label sticking to the top of the viewport while its group scrolls.
• Horizontal: A row of profile avatars with names and a colored ring for active users, kept on one line with whitespace-nowrap and scrolled sideways with a horizontal ScrollBar.
• Chat: A message thread built with Bubble and a composer pinned below it. An effect sets the viewport scrollTop to its scrollHeight, so the area jumps to the newest message whenever one is sent.

How to Install the Shadcn Scroll Area Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a scroll area variant by its name:

npx shadcn@latest add @shadcnuikit/scroll-area1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Scroll Area Component

Wrap the content in ScrollArea and give it a fixed height. The content inside scrolls; everything outside stays still.

import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const releases = Array.from({ length: 30 }, (_, i) => `v2.${30 - i}.0`)

export function ReleaseList() {
  return (
    <ScrollArea className="h-72 w-56 rounded-md border">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-medium">Releases</h4>
        {releases.map((release) => (
          <div key={release}>
            <div className="text-sm">{release}</div>
            <Separator className="my-2" />
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Why Use the Shadcn Scroll Area Component

• Consistent scrollbars: The same thin scrollbar on Windows, macOS and Linux, styled with your theme colors.
• Native scrolling feel: Wheel, trackpad, touch and keyboard scrolling stay native, so nothing feels emulated.
• Stable layouts: Long content stays inside its box, so headers, footers and sidebars do not move.
• Both directions: Vertical by default, horizontal with one extra ScrollBar, or both at once.
• Works with sticky content: Sticky headers and footers inside the viewport behave like they do in a normal page.

Common Scroll Area Use Cases

• Sidebars: Navigation lists and file trees that scroll independently of the page.
• Chat windows: Message history in a fixed panel with the input pinned below.
• Notification panels: Activity feeds in a popover or dropdown grouped by date.
• Long text in overlays: Terms, policies and release notes inside a sheet or drawer.
• Horizontal galleries: Stories, avatars, tags or product thumbnails in a single row.
• Code and logs: Wide code blocks and log output that need horizontal and vertical scrolling.

Customizing the Shadcn Scroll Area

Size and borders go on ScrollArea through className, and padding belongs on an inner wrapper so the scrollbar stays at the edge. The thumb uses the border color token, so it follows your theme and dark mode; you can tune the palette with the free Theme Generator. With Radix UI, the type prop decides when the scrollbar is visible: hover (the default), scroll, auto or always.

For horizontal scrolling, prevent wrapping and add a horizontal scrollbar:

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

export function TagRow({ tags }: { tags: string[] }) {
  return (
    <ScrollArea className="w-96 rounded-md border whitespace-nowrap">
      <div className="flex w-max gap-4 p-4">
        {tags.map((tag) => (
          <span key={tag} className="text-sm">
            {tag}
          </span>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

Scroll Area Accessibility and Keyboard Support

The content lives in a real scrolling viewport, so screen readers read it in order and assistive technology can scroll it like any other region. The custom scrollbar is not keyboard focusable. Keyboard users scroll by tabbing to focusable elements inside the area, which scrolls them into view, or, in current browsers, by focusing the scrollable viewport itself, which shows a focus ring in this implementation.

If the scroll area holds an important region, such as a chat log, give it an accessible name with aria-label and a suitable role. Keep the area large enough to show several items at once, and avoid nesting scroll areas in the same direction. The scrolling keys below are handled natively by the browser while the viewport has focus.

Scroll Area Best Practices

• Always give the scroll area a fixed height or max height; without it, it grows with the content and never scrolls.
• Put padding on an inner element, not on the ScrollArea, so the scrollbar is not pushed inward.
• Show a hint that more content exists, such as a partially visible last item or a fade at the edge.
• Do not wrap the entire page in a scroll area; let the browser handle page scrolling.
• In a flex column, add min-h-0 and flex-1 so the area can shrink and scroll, as in the sheet variant.
• For a scrolling list of rows, combine it with the Item component for consistent spacing.

Components Related to Scroll Area

Shadcn Scroll Area FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.