Scroller

Cards 1

About

A scrollable container with fading edge shadows, optional hidden scrollbar, and navigation arrows for vertical or horizontal overflow.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroller to your project and fits it to your theme.

Code

How Scroller is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Scroller } from "@/components/ui/scroller";

export default function ScrollerHorizontalDemo() {
  return (
    <Scroller orientation="horizontal" className="w-full p-4" asChild>
      <div className="flex items-center gap-2.5">
        {Array.from({ length: 10 }).map((_, index) => (
          <div
            key={index}
            className="flex h-32 w-[180px] shrink-0 flex-col items-center justify-center rounded-md bg-accent p-4"
          >
            <div className="font-medium text-lg">Card {index + 1}</div>
            <span className="text-muted-foreground text-sm">
              Scroll horizontally
            </span>
          </div>
        ))}
      </div>
    </Scroller>
  );
}