Components
A scrollable container with fading edge shadows, optional hidden scrollbar, and navigation arrows for vertical or horizontal overflow.
Loading preview...
import { Scroller } from "@/components/ui/scroller";
export default function ScrollerHiddenDemo() {
return (
<Scroller className="flex h-80 w-full flex-col gap-2.5 p-4" hideScrollbar>
{Array.from({ length: 20 }).map((_, index) => (
<div
key={index}
className="flex h-40 flex-col rounded-md bg-accent p-4"
>
<div className="font-medium text-lg">Card {index + 1}</div>
<span className="text-muted-foreground text-sm">
Scroll smoothly without visible scrollbars
</span>
</div>
))}
</Scroller>
);
}
Loading preview...
Loading preview...
Loading preview...