# Scroll Area

Custom scrolling that keeps the native feel: an overlay bar, edge fades and the Soft tray shell.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/scroll-area
```

## Usage

```tsx
import { ScrollArea } from '@/components/fetaui/scroll-area'

export function Example() {
  return (
    <ScrollArea label="Releases" height={240}>
      {rows}
    </ScrollArea>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | string | required |
| children | ReactNode | required |
| orientation | vertical, horizontal, both | vertical |
| fades | boolean | true |
| shell | { title, meta, actions } |  |
| height | number, string |  |
| viewportRef | Ref |  |
| animated | boolean | true |
| Scrollbar viewport | HTMLElement | required |
| Scrollbar orientation | vertical, horizontal | vertical |

## When to use

- When a region must scroll inside a fixed frame: feeds, lists, carousels, wide tables, dialog bodies.
- With edge fades, so hidden content is obvious.

## When not to use

- For long reads: use page scroll.

## Accessibility

- The viewport is a labelled, focusable region, so the keyboard can scroll it.
- The bar is decorative to screen readers.
- Focus is never trapped inside.

## Motion

- The bar wakes in 120 ms when you scroll or hover, and sleeps 800 ms later over 240 ms.
- The thumb widens from 4 to 6 in 160 ms and the track fades in.
- Dragging inks the thumb and raises a mono position tip.
- Edge fades clear in 160 ms when there is nothing more.
- With reduced motion, the bar stays visible and changes are instant.