Scroll Area

When to UseCopy Anchor Link

• for a list that is longer than the panel that contains it, such as 24 invoices in a frame 224px tall
• for a row of chips or cards that is wider than its frame
• when the scrollbar must not reduce the width of the content, as the bar is displayed over the content

When Not to UseCopy Anchor Link

• when the browser’s own scrollbar is enough, as a Scroll Area is a client component that adds four elements (set overflow-auto on the element)
• for a table wider than its container (use a Table, which scrolls sideways in a container of its own)
• for a conversation that stays at its latest message (use a Message Scroller)
• for the list of a Dropdown Menu, a Select, or a Command component (add nothing, as these scroll on their own)
• for items that users page through one at a time (use a Carousel)
• for a frame that users resize (use the Resizable component)

AnatomyCopy Anchor Link

ScrollArea renders the root, the viewport, a vertical scrollbar, and the corner where two scrollbars meet, so you add only the content. A scrollbar is in the page only while the content overflows in its direction.

BehaviorCopy Anchor Link

When users drag the thumb, the content scrolls, and when they click the track, the content jumps to that point. The wheel and touch scroll the viewport as they scroll a page.

SizeCopy Anchor Link

A Scroll Area has no height of its own. If you don’t set one, it grows with its content and never scrolls. Set the height through className, as the preview does with h-56.

ScrollbarCopy Anchor Link

The scrollbar is shown for as long as the content overflows; it doesn’t wait for the pointer. It is displayed over the content and uses no space of its own. Add at least 10px of padding to the content on that side so that the bar covers nothing.

HorizontalCopy Anchor Link

ScrollArea renders only the vertical scrollbar. If the content is wider than the frame, add <ScrollBar orientation="horizontal" /> after the content.

AccessibilityCopy Anchor Link

The viewport is a native scroll container, so the browser scrolls it when users use the wheel, touch, or the browser’s own scrolling keys. The scrollbar responds to the pointer only.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/scroll-area

UsageCopy Anchor Link

import { ScrollArea } from '@/components/ui/scroll-area';

<ScrollArea className="h-56 w-56 rounded-lg border">
    <ul aria-label="Invoices" className="grid gap-2 p-3 text-sm">
        <li>Invoice 0001</li>
        <li>Invoice 0002</li>
    </ul>
</ScrollArea>;

HorizontalCopy Anchor Link

To scroll a row sideways, prevent the items from shrinking, and add the horizontal ScrollBar as the last child.

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

<ScrollArea className="w-80 rounded-lg border">
    <ul className="flex gap-2 p-3 text-sm">
        <li className="shrink-0">Invoice 0001</li>
        <li className="shrink-0">Invoice 0002</li>
    </ul>
    <ScrollBar orientation="horizontal" />
</ScrollArea>;

API ReferenceCopy Anchor Link

Summit adds no props. ScrollArea accepts the props of ScrollArea.Root in Base UI and passes its children to the viewport. ScrollBar accepts the props of ScrollArea.Scrollbar, and its orientation is 'vertical' by default. See the Base UI Scroll Area documentation for overflowEdgeThreshold, orientation, and keepMounted.