# Scroll Area

> Themed, cross-browser scroll containers.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/scroll-area.json`

## Install

```tsx
import { ScrollArea, ScrollBar } from "@aspyn-io/kit";
```

### Vertical list

Styled, cross-browser scrollbars that match the theme.

```tsx
<ScrollArea className="h-64 w-56 rounded-md border">
  <div className="p-4">
    {versions.map((v, i) => (
      <React.Fragment key={v}>
        <div className="text-sm">{v}</div>
        {i < versions.length - 1 && <Separator className="my-2" />}
      </React.Fragment>
    ))}
  </div>
</ScrollArea>
```

### Horizontal

Add a ScrollBar with orientation="horizontal" inside the ScrollArea to scroll the other axis.

```tsx
<ScrollArea className="w-80 rounded-md border">
  <div className="flex w-max gap-3 p-4">…wide content…</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>
```

## Notes

- ScrollArea renders a vertical ScrollBar by default; add <ScrollBar orientation="horizontal" /> as a child for horizontal scrolling.
- The viewport is a real scroll container: wheel, touch, thumb drag, and keyboard (arrows, Page, Home/End) all work.
- For scrollable dialog content, nest a ScrollArea inside DialogContent between the header and footer.