# 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="bg-muted rounded 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="bg-muted w-48 shrink-0 rounded p-2">
            Card {i + 1}
          </div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  );
}
```