labsUIScroll Area
Overlay scrollbars: thin thumbs that fade in while scrolling or on hover, widen under the pointer and drag. Scrolling stays native; the labeled region is keyboard-focusable.
import { ScrollArea } from "@/components/ui/scroll-area";export function ModLog({ entries,}: { entries: { id: string; text: string }[];}) { return ( <ScrollArea aria-label="Moderation log" className="h-64 rounded-xl border bg-card" > <ol className="divide-y px-4"> {entries.map((e) => ( <li key={e.id} className="py-2.5 text-sm"> {e.text} </li> ))} </ol> </ScrollArea> );}<ScrollArea>
Overlay scrollbars: thin thumbs that fade in while scrolling or on hover, widen on hover and drag. Scrolling itself stays native (wheel, touch, keyboard); a horizontal one also takes the mouse wheel. Give it a height. aria-label names the scrollable region so keyboard users can focus and scroll it.
orientationdefault"vertical""vertical" | "horizontal" | "both"Axes that scroll and get a thumb.
viewportClassNamestringClasses for the scrolling viewport (padding goes here).
| Prop | Type | Default |
|---|---|---|
orientationAxes that scroll and get a thumb. | "vertical" | "horizontal" | "both" | "vertical" |
viewportClassNameClasses for the scrolling viewport (padding goes here). | string | — |
Also accepts every <div> prop.
* required. Every component also takes className.