laif-ds/dist/agent-docs/components/ScrollArea.md

Design System di Laif con componenti React basati su principi di Atomic Design

# ScrollArea

## Overview

Custom scrollable area with styled scrollbars. Built on Radix Scroll Area.

---

## Exports

- `ScrollArea`
- `ScrollBar` (prop: `orientation = "vertical"`)

---

## Examples

```tsx
import { ScrollArea } from "laif-ds";

export function VerticalScroll() {
  return (
    <ScrollArea className="h-40 w-64 rounded-md border p-2">
      <div className="space-y-2">
        {Array.from({ length: 20 }).map((_, i) => (
          <div key={i} className="rounded bg-muted p-2">Row {i + 1}</div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

```tsx
import { ScrollArea, ScrollBar } from "laif-ds";

export function HorizontalScroll() {
  return (
    <ScrollArea className="w-64 rounded-md border p-2">
      <div className="flex w-[600px] gap-2">
        {Array.from({ length: 10 }).map((_, i) => (
          <div key={i} className="w-48 shrink-0 rounded bg-muted p-2">Card {i + 1}</div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  );
}
```