Scroll Area
A box that scrolls on its own, with a slim scrollbar (Radix Scroll Area).
Preview
Every place Zostel is live (84)
Usage
tsx
import { ScrollArea } from "zostel-ui";
<ScrollArea className="h-72 rounded-xl border border-zostel-beige">
<ul className="p-4">{places.map((p) => <li key={p.slug}>{p.name}</li>)}</ul>
</ScrollArea>Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "auto" | "always" | "scroll" | "hover" | "hover" | When the scrollbar shows. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
typeType:
"auto" | "always" | "scroll" | "hover"Default:
"hover"When the scrollbar shows.
classNameType:
stringDefault: —
More classes, merged with the component’s own (tailwind-merge).