Layout · astro-ui · ScrollArea

ScrollArea

Token-themed scrollable region with styled scrollbar.

ScrollArea wraps any content in a fixed-size region with a custom-styled, token-themed scrollbar — consistent across platforms where the native scrollbar clashes with the design.

← All components

Features

Custom scrollbar themed from tokens
height / maxHeight control
Horizontal and vertical overflow
Keyboard scrollable (native overflow region semantics)

Usage

---
import { ScrollArea } from "astro-ui";
---

<ScrollArea height="12rem">
  {longList.map((item) => <p>{item}</p>)}
</ScrollArea>

Demos

Vertical

Row one — the scrollbar is themed from design tokens.

Row two

Row three

Row four

Row five

Row six

Row seven

Row eight

<ScrollArea class="h-40 w-full">
  <div style="display:grid;gap:0.5rem">
    <p>Row one</p>
    <p>Row two</p>
    <p>Row three</p>
  </div>
</ScrollArea>

Horizontal

JanFebMarAprMayJunJulAug

<ScrollArea orientation="horizontal" class="w-full">
  <div style="width:max-content;display:flex;gap:0.5rem">
    <Tag>Jan</Tag>
    <Tag>Feb</Tag>
    <Tag>Mar</Tag>
  </div>
</ScrollArea>

API

Props

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal" \| "both"`	`"vertical"`	Which axes may scroll.
`class`	`string`	`—`	Size the region here (e.g. h-40 w-full); merged via cn().
`id`	`string`	`—`	Element id.

Slots

Slot	Description
`default`	Scrollable content.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Native or custom scrolling?

Native overflow with themed scrollbar styles — no JS scroll simulation, so momentum, keyboard, and touch behaviors all stay native.

Changelog

Version history mentioning ScrollArea.

v0.1.0 — 2026-11-11

added

Layout (7): Card, AspectRatio, ScrollArea, Separator, Accordion, Collapsible, StickySurface.

fixed

ScrollArea exposes a labelled region; LightboxItem accepts captions and captionsLang for video tracks.