Scroll Area
A box that scrolls its content within a set height or width. On web its scrollbars are thin and in the theme colors.Vertical list
Preview
Code
Tagsv1.30.0v1.29.0v1.28.0v1.27.0v1.26.0v1.25.0v1.24.0v1.23.0v1.22.0v1.21.0v1.20.0v1.19.0v1.18.0v1.17.0v1.16.0v1.15.0v1.14.0v1.13.0v1.12.0v1.11.0v1.10.0v1.9.0v1.8.0v1.7.0v1.6.0v1.5.0v1.4.0v1.3.0v1.2.0v1.1.0
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { ScrollArea, VStack } from '@advui/core'
<ScrollArea aria-label="Release tags" height="72">
<VStack padding="4" gap="2">…</VStack>
</ScrollArea>Examples
Horizontal row
Preview
Code
N
T
A
M
E
C
H
API reference
ScrollArea
Takes size and border props such as `height`, `maxWidth` and `borderRadius`.| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'vertical' | 'horizontal' | 'vertical' | Which way it scrolls. |
aria-label | string | — | Names the region for screen readers. Recommended. |
avoidKeyboard | boolean | false | Keep the focused field above the keyboard, for a ScrollArea that fills the screen (a form, a settings page). Taps on buttons then work while the keyboard is up. Inside a ScrollArea or AppShell that already does, it leaves that to the outer one.iOS, Android only. |
children required | ReactNode | — | One child that holds the content, such as a VStack (an HStack when horizontal). |
Accessibility
- On web it takes keyboard focus, so people who do not use a mouse can scroll it with the arrow keys, with a visible focus ring.
- With
aria-labelit is a namedregionlandmark. - Content keeps its own semantics; the scrollbars are the browser’s, only thinner and in theme colors.
| Key | Action |
|---|---|
| Tab | Focuses the area. |
| Arrow keys / Page Up / Page Down | Scroll while it has focus. |
Platform notes
Web
A scrolling box with CSS
scrollbar-width: thin and theme colors (browsers without support show their default scrollbar).iOS
A ScrollView with the platform scroll indicator. Top Sticky children of the content element are pinned as sticky headers (since 0.10.0); the content element’s children then become the ScrollView’s own, and its style props style the scroll content. With
avoidKeyboard (since 0.15.0) it insets its content by the keyboard and scrolls the focused field into view (automaticallyAdjustKeyboardInsets).Android
Same as iOS, with nested scrolling on, so a ScrollArea inside a scrolling screen scrolls itself (since 0.10.0; before, the screen took every vertical drag). Edge-to-edge apps no longer shrink for the keyboard, so with
avoidKeyboard it ends where the keyboard starts, measured on screen: unlike React Native’s KeyboardAvoidingView it needs no offset for a navigation header above. Android then scrolls the focused field into view.