# Scroll Area

- Page: <https://kznlabs.github.io/labsUI/components/scroll-area>

## Scroll Area (`scroll-area`, component)

Overlay scrollbars: thin thumbs that fade in while scrolling or on hover, widen under the pointer and drag. Scrolling stays native; the labeled region is keyboard-focusable.

- Install: `npx @kznlabs/labsui add scroll-area`
- Docs: <https://kznlabs.github.io/labsUI/components/scroll-area>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<ScrollArea>` (+ <div> props): Overlay scrollbars: thin thumbs that fade in while scrolling or on hover, widen on
hover and drag. Scrolling itself stays native (wheel, touch, keyboard); a horizontal one also
takes the mouse wheel. Give it a height.
`aria-label` names the scrollable region so keyboard users can focus and scroll it.
  - `orientation?: "vertical" | "horizontal" | "both"` = `"vertical"`: Axes that scroll and get a thumb.
  - `viewportClassName?: string`: Classes for the scrolling viewport (padding goes here).

### Usage

```tsx
<ScrollArea aria-label="Moderation log" className="h-64 rounded-xl border">…</ScrollArea>
```

### Example: mod-log.tsx

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

export function ModLog({ entries }: { entries: { id: string; text: string }[] }) {
  return (
    <ScrollArea aria-label="Moderation log" className="h-64 rounded-xl border bg-card">
      <ol className="divide-y px-4">
        {entries.map((e) => (
          <li key={e.id} className="py-2.5 text-sm">
            {e.text}
          </li>
        ))}
      </ol>
    </ScrollArea>
  );
}
```