Display

Scroll area

A scrolling region with a thin custom scrollbar that shows on hover, on Base UI ScrollArea.

packages/design-system/components/ui/scroll-area.tsx

Examples

Vertical
Horizontal

Anatomy

  1. 01Root, relative
  2. 02Viewport
  3. 03Scrollbar and thumb
  4. 04Corner

Usage

import { ScrollArea, ScrollBar } from "@repo/design-system/components/ui/scroll-area";

<ScrollArea className="h-72">
  ...
</ScrollArea>

<ScrollArea className="w-full">
  <div className="flex w-max gap-3">...</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Props

PropTypeDefaultDescription
ScrollBar orientation"vertical" | "horizontal""vertical"A vertical bar is built in. Add a horizontal one yourself.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Give it a fixed height or width, or it has nothing to scroll.

Don't

  • Wrap the whole page in it.