Shadcn Scroll Area

A scroll area is a sized box with styled scrollbars and native overflow. Give it a height — or a width for a row — and drop content in. Use it for tag lists, sidebars, image strips, and any panel that should not grow the page.

Usage

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

<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

The box only scrolls after you give it a size. A vertical ScrollBar is already inside the root; add another with orientation="horizontal" for a row.

Composition

Horizontal

Add ScrollBar with orientation="horizontal". Keep the inner row w-max so items do not wrap.

RTL

Wrap with DirectionProvider and dir="rtl". The scrollbar sits on the start edge.

API

ScrollBar

ScrollArea and ScrollBar take className. The viewport and corner are not exported.

Keyboard

Scrolling is native. Focus the viewport, then the usual keys work.

Exact keys follow the OS. There is no extra listener.

Notes

The scrollable node is the viewport ([data-slot="scroll-area-viewport"]), not the root. scrollTop on a ref to ScrollArea does nothing.

With other components

Questions

Related