Scroller

Component 6

About

Display an overflowing list of items.

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 React from "react";
import { Scroller } from "@/components/ui/scroller";

export const Vertical = () => (
    <div className="flex flex-col gap-2">
        <div className="font-bold text-xl dark:text-white">Vertical</div>
        <Scroller height={220} overflow="y" width="100%">
            <div className="flex flex-col gap-4 w-[400px]">
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            </div>
        </Scroller>
    </div>
);

export const Horizontal = () => (
    <div className="flex flex-col gap-2 w-1/2">
        <div className="font-bold text-xl dark:text-white">Horizontal</div>
        <Scroller height="100%" overflow="x" width="100%">
            <div className="flex gap-4 min-w-[120%]">
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            </div>
        </Scroller>
    </div>
);

export const Free = () => (
    <div className="flex flex-col gap-2 w-1/2">
        <div className="font-bold text-xl dark:text-white">Free</div>
        <Scroller height={220} overflow="both" width="100%">
            <div className="grid grid-flow-col grid-rows-2 gap-4">
            {[...Array.from({ length: 6 }, (_, i) => (
                <div className="bg-[#171717] dark:bg-[#ededed] h-96 w-96" key={i} />
            ))]}
            </div>
        </Scroller>
    </div>
);


export const VerticalWithButtons = () => (
    <div className="flex flex-col gap-2 w-1/2">
        <div className="font-bold text-xl dark:text-white">Vertical with buttons</div>
        <Scroller
          childrenContainerClassName="gap-4"
          height={220}
          overflow="y"
          withButtons
        >
          {[...Array.from({ length: 4 }, (_, i) => (
            <div className="bg-[#171717] dark:bg-[#ededed] dark:text-[#171717] text-[#ededed] h-60 w-full" key={i} />
          ))]}
        </Scroller>
    </div>
);


export const HorizontalWithButtons = () => (
    <div className="flex flex-col gap-2 w-1/2">
        <div className="font-bold text-xl dark:text-white">Horizontal with buttons</div>
        <Scroller
          childrenContainerClassName="gap-4"
          height="100%"
          overflow="x"
          width="100%"
          withButtons
        >
          {[...Array.from({ length: 4 }, (_, i) => (
            <div className="bg-[#171717] dark:bg-[#ededed] dark:text-[#171717] text-[#ededed] h-60 w-96" key={i} />
          ))]}
        </Scroller>
    </div>
);