Skip to content

Scroll Area

A region inside the page that scrolls, with thin themed scrollbars. Focus it to scroll with the arrow keys.

Sourcecomponents/scroll-area.tsx

Vertical

Horizontal

Usage

Scroll Area usage
import { ScrollArea } from "@/components/scroll-area";
export function ScrollAreaUsage({ tags }: { tags: string[] }) {  return (    <ScrollArea aria-label="Tags" className="h-48 w-full">      <ul className="flex flex-col gap-2 p-3">        {tags.map((tag) => (          <li key={tag}>{tag}</li>        ))}      </ul>    </ScrollArea>  );}

When to use

Use when

A region inside the page that scrolls: a long list in a panel, a row of cards. aria-label is required

Don’t use when

The page itself (let it scroll natively)