Scroll Area
A native scroll container with a thin scrollbar.
Overview
ScrollArea uses the browser's own scrolling. Set a height or width with className. The scrollbar is the platform scrollbar, styled where the browser allows it. Keyboard, wheel, and touch scrolling stay native.
Preview
Customize
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add scroll-areaUsage
import { ScrollArea } from "@/components/ui/scroll-area";
export function Notes() {
return (
<ScrollArea className="h-72" aria-label="Notes">
<p>A long note.</p>
</ScrollArea>
);
}Examples
Vertical
A fixed height makes the vertical scroll container obvious. Long content scrolls inside the box.
Shortcuts
The row is wider than the bordered container, so it scrolls sideways. The page width does not grow with it.
Both axes
orientation="both" scrolls a wide grid that is also taller than the frame.
In practice
A notifications panel keeps a fixed-height ScrollArea for the feed while the header and actions stay put.
Notifications
Updates from the last day.
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" | "horizontal" | "both" | "vertical" | Chooses which axes use native overflow. |
className | string | — | Merged onto the scroll container with cn. Set the height or width here. |
Accessibility
The container is a normal div. It is focusable so keyboard users can scroll it. It does not add a role. ScrollBar is hidden from assistive technology because the native container already scrolls.