# ScrollArea

> A scroll container with a thin, token-coloured scrollbar.

URL: https://apogee.avaui.dev/docs/scroll-area
Last updated: 2026-10-15

A scroll container with a thin, token-coloured scrollbar.

Last updated October 15, 2026

```astro
<ScrollArea height="10rem" aria-label="Changelog">
…
</ScrollArea>
```

## Add

```sh
npx @ava-ui/apogee add scroll-area
```

No Apogee dependencies.

## Usage

```astro
---
import ScrollArea from '@/components/apogee/ScrollArea/ScrollArea.astro'

<JsNote fallback="The box scrolls normally, stays in the Tab order and shows no fade.">
  Keeps the box in the Tab order only while its content overflows. With `fade`, sets `data-fade` on the box as it scrolls so the hidden edge fades.
</JsNote>
---
<ScrollArea height="20rem" aria-label="Members">
  <ul>…</ul>
</ScrollArea>
```

## API

`@composable`. Any other native attribute passes through.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `direction` | `'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | Which axes scroll. |
| `height` | `string` | — | Max height, any CSS length. |
| `maxHeight` | `string` | — | Alias of `height`. |
| `fade` | `boolean` | `false` | Fade the edge that hides content (a small island). |
| `scrollbar` | `'thin' \| 'hidden' \| 'hover'` | `'thin'` | Scrollbar treatment. |
| `class` | `string` | — | Extra classes, merged last. |

## Variants

```astro
<ScrollArea direction="vertical" height="8rem">…</ScrollArea>
<ScrollArea direction="horizontal">…</ScrollArea>
<ScrollArea direction="both" height="8rem">…</ScrollArea>
```

## Fade and scrollbar

Every `scrollbar` value, and `fade`:

```astro
<ScrollArea maxHeight="8rem" fade>…</ScrollArea>
<ScrollArea maxHeight="8rem" scrollbar="thin">…</ScrollArea>
<ScrollArea maxHeight="8rem" scrollbar="hidden">…</ScrollArea>
<ScrollArea maxHeight="8rem" scrollbar="hover">…</ScrollArea>
```

`fade` with `direction="both"` fades the top and bottom edges only.

## Short content

When nothing overflows, the box leaves the Tab order (there is nothing to scroll); it rejoins as soon as its content grows past the height.

```astro
<ScrollArea maxHeight="8rem" aria-label="Two lines">…</ScrollArea>
```

## Accessibility

-   While its content overflows, the container has `tabindex="0"` so keyboard users can focus it and scroll with the arrow keys; it shows the focus ring. When nothing overflows it leaves the Tab order.
-   Give it an `aria-label` (or `aria-labelledby`) when nothing nearby names the region.

## Tokens

| Token | Used for |
| --- | --- |
| `--border-neutral` | Scrollbar thumb |
| `--outline-color-focus` | Focus outline |

Layout primitive, so no content rules.

## Related

[

CarouselA horizontal scroll-snap track for browsing slides. Native scroll and swipe work with zero JS; arrows, dots, and autoplay are progressive enhancement.

](https://apogee.avaui.dev/docs/carousel)[

MarqueeAn endless scrolling strip for logos, tags, or testimonials, with a play/pause toggle.

](https://apogee.avaui.dev/docs/marquee)[

TableA styled, horizontally-scrollable table. Write plain thead/tbody markup — Table only styles it.

](https://apogee.avaui.dev/docs/table)