Scroll area
@xui/scroll-areaA scroll container with slim, theme-aware scrollbars. Give the host a bound — a height for vertical scrolling, a width for horizontal.
Install
pnpm add @xui/scroll-area Add the barrel to a standalone component's imports:
import { XuiScrollAreaImports } from '@xui/scroll-area';@Component({ imports: [XuiScrollAreaImports], // …})Examples
Vertical
Loading preview…
<xui-scroll-area class="border-border h-72 w-56 rounded-lg border p-3"> <p class="text-foreground mb-2 text-sm font-medium">Tags</p> @for (tag of tags; track tag) { <div class="text-foreground-muted border-border/60 border-b py-1.5 text-sm last:border-0">{{ tag }}</div> }</xui-scroll-area>Horizontal
Loading preview…
<xui-scroll-area orientation="horizontal" class="border-border w-96 rounded-lg border p-3"> <div class="flex gap-3"> @for (i of items; track i) { <div class="bg-surface-inset text-foreground flex h-24 w-24 shrink-0 items-center justify-center rounded-md text-lg"> {{ i }} </div> } </div></xui-scroll-area>API
A scroll container with slim, theme-aware scrollbars (WebKit and Firefox), so overflowing content scrolls without the OS's default chrome. Give the host a bound — a height for vertical scrolling, a width for horizontal.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''orientationXuiScrollOrientationWhich axis may scroll. The other one is clipped.this.config.orientation