Scroll Area

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

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

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-72 w-48 rounded-2xl 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>
  )
}

Scroll Area wraps the scroll area primitive of the chosen base. ScrollArea renders the root, a focusable viewport for your content, a vertical ScrollBar and a corner. Add a horizontal ScrollBar as a child when content scrolls sideways.

Use Scroll Area to give overflowing content a consistent scrollbar across platforms. For chat transcripts that should open at the latest message, use Message Scroller.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/scroll-area

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add scroll-area

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

2. Copy the source into components/ui/scroll-area.tsx:

3. Update the import paths to match your project.

Usage

import { ScrollArea, ScrollBar } 

<ScrollArea

Give ScrollArea a fixed height or width with className so its content can overflow. Children render inside the viewport. For horizontal scrolling, make the content wider than the area (for example with w-max) and include ScrollBar with orientation="horizontal".

Examples

Horizontal

A row of album covers that scrolls sideways with a horizontal scrollbar.

API Reference

Accessibility

• The viewport is focusable, so keyboard users can Tab to it and scroll with the arrow keys.
• Focus is shown with the standard focus ring around the viewport.
• The custom scrollbars are presentational; native scrolling by wheel, touch and keyboard still works.

Notes

• Styling hooks: data-slot values scroll-area, scroll-area-viewport, scroll-area-scrollbar and scroll-area-thumb. Scrollbars expose data-orientation.
• The thumb uses the border color.
• The viewport inherits the root's border radius, so rounded containers clip their content.