Scroll Area
Themed, cross-browser scroll containers.
Installation
npm install @aspyn-io/kit @aspyn-io/tokensimport { ScrollArea, ScrollBar } from "@aspyn-io/kit";Vertical list
Styled, cross-browser scrollbars that match the theme.
<ScrollArea className="h-64 w-56 rounded-md border">
<div className="p-4">
{versions.map((v) => (
<React.Fragment key={v}>
<div className="text-sm">{v}</div>
<Separator className="my-2" />
</React.Fragment>
))}
</div>
</ScrollArea>Horizontal
<ScrollArea className="w-80 whitespace-nowrap rounded-md border">
<div className="flex gap-3 p-4">…wide content…</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>Notes
- For scrollable dialog content, prefer DialogBody — it pins the header/footer and adds border separation automatically.