Server Component · 0 KB client JS
Scroll Area
A scroll container with scrollbars that match the theme. The scrollbars are
the platform's own, restyled with CSS (::-webkit-scrollbar +
scrollbar-width/scrollbar-color): no JavaScript thumb, no
ResizeObserver, no synthetic scrolling. Keyboard scrolling, momentum and RTL
stay native, and the component ships zero client JavaScript.
import { ScrollArea, Box, Text, VStack } from "astralis-ui";
// No "use client": the scrollbars are the platform's own, restyled with CSS.
export function ScrollAreaDemo() {
return (
<ScrollArea style={{ width: "18rem", height: "12rem" }}>
<VStack gap="0" alignItems="stretch">
{Array.from({ length: 20 }, (_, i) => (
<Box key={i} px="3" py="2" bg={i % 2 ? undefined : "subtle"}>
<Text size="sm">Release note {String(i + 1).padStart(2, "0")}</Text>
</Box>
))}
</VStack>
</ScrollArea>
);
}direction
import { ScrollArea, Text, VStack } from "astralis-ui";
<ScrollArea
style={{ height: "10rem" }}
>
<VStack gap="3" p="3" w="xl" alignItems="stretch">
<Text size="sm">Release note 01: a line wide enough to scroll sideways</Text>
<Text size="sm">Release note 02: a line wide enough to scroll sideways</Text>
<Text size="sm">Release note 03: a line wide enough to scroll sideways</Text>
<Text size="sm">Release note 04: a line wide enough to scroll sideways</Text>
<Text size="sm">Release note 05: a line wide enough to scroll sideways</Text>
<Text size="sm">Release note 06: a line wide enough to scroll sideways</Text>
<Text size="sm">Release note 07: a line wide enough to scroll sideways</Text>
</VStack>
</ScrollArea>
Import#
import { ScrollArea } from "astralis-ui";Sizing#
Give it a height or maxHeight through style. Without one the area grows
with its content and there is nothing to scroll.
Props#
Extends div props:
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "vertical" | "horizontal" | "both" | "vertical" | Which axis scrolls. |
hideScrollbar | boolean | false | Hides the bar entirely; the content still scrolls. |