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