Scroll Area

• Location: sabo/src/components/ui/scroll-area.tsx

​

When to use

• Constrain overflow for long lists or code blocks with consistent, themed scrollbars.
• Use for panels and menus that require scrolling.

​

Usage

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

export function Example() {
  return (
    <ScrollArea className="h-32 w-64 rounded-md border p-3">
      <div className="space-y-2">
        {Array.from({ length: 20 }).map((_, i) => (
          <div key={i} className="text-sm text-muted-foreground">Item #{i + 1}</div>
        ))}
      </div>
    </ScrollArea>
  );
}

​

Key props

​

Styling tip

• Customize thumb and rail with [data-slot=scroll-area-thumb] and scrollbar orientation classes.

​

Accessibility

• Keep focus outlines on the viewport (focus-visible styles already applied).