Scroll Area

Installation

npx shadcn@latest add @fujin/scroll-area

Usage

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

<ScrollArea className="h-72 rounded-md border">...</ScrollArea>

Give the root a height (h-72) or a maximum (max-h-72); the viewport inherits either.

Horizontal

Both scrollbars are built in and only appear on an axis that overflows. Give wide content w-max so it does not wrap.

Keyboard access

While the content overflows, the viewport is in the tab order so keyboard users can scroll it with the arrow keys (WCAG 2.1.1). When it is a tab stop, name it:

<ScrollArea viewportProps={{ role: "region", "aria-label": "Releases" }}>

What's different from shadcn/ui

• Don't add <ScrollBar orientation="horizontal" /> as a child: both scrollbars are already rendered, and a second one would duplicate it.
• viewportProps reaches the scrolling element (ref, onScroll, aria-label). shadcn has no way to get at it.
• The focus indicator is a solid inset outline, not a translucent ring.
• The scrollbar shows on hover, while scrolling, and while focus is inside.

API Reference

Every other prop is forwarded to the Base UI Scroll Area root.