# Scroll Area

A thin custom scrollbar on top of native scrolling.

Group: Layout

## Import

```tsx
import { ScrollArea } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function ScrollAreaDemo() {
  return (
    <ScrollArea.Root h="48" w="48" rounded="l2" borderWidth="1px">
      <Stack gap="0" p="3">
        {Array.from({ length: 30 }, (_, i) => `v1.2.0-beta.${30 - i}`).map((v) => (
          <Text key={v} fontSize="sm" py="2" borderBottomWidth="1px">
            {v}
          </Text>
        ))}
      </Stack>
    </ScrollArea.Root>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"vertical" \| "horizontal" \| "both"` |  |  |
| `type` | `"hover" \| "always" \| "scroll"` | `hover` | `"hover"` shows the scrollbar on hover/scroll, `"always"` always, `"scroll"` only while scrolling. |
| `viewportProps` | `ComponentPropsWithoutRef<"div">` |  | Extra props for the viewport element (e.g. `tabIndex`, `aria-label`). |

`*` = required. Style props and HTML attributes are accepted too.