Horizontal Scroll Gallery

Cards 32

About

Pinned section where vertical scrolling drives a horizontal gallery's position, translating a track of items sideways as you scroll down.

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

Code

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

Usage.tsx

"use client";

import { HorizontalScrollGallery } from "@/components/ui/horizontal-scroll-gallery";
import { useRef } from "react";

export default function HorizontalScrollGalleryDemo() {
  const containerRef = useRef<HTMLDivElement>(null);
  return (
    <div
      ref={containerRef}
      className="h-72 w-full overflow-y-auto rounded-lg border border-border bg-background"
    >
      <HorizontalScrollGallery scroller={containerRef} scrollHeight="400%">
        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
          <div
            key={i}
            className="flex h-40 w-56 shrink-0 items-center justify-center rounded-lg border border-border bg-muted text-2xl font-bold text-foreground"
          >
            {i}
          </div>
        ))}
      </HorizontalScrollGallery>
    </div>
  );
}