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 ScrollerNavigationDemo() {
  return (
    <Scroller
      hideScrollbar
      withNavigation
      scrollTriggerMode="press"
      className="flex h-80 w-full flex-col gap-2.5 p-4"
    >
      {Array.from({ length: 10 }).map((_, index) => (
        <div key={index} className="flex 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">
            Use the navigation arrows to scroll
          </span>
        </div>
      ))}
    </Scroller>
  );
}