Horizontal Scroll Gallery

Converts vertical scroll into horizontal movement with momentum physics for immersive galleries.

UniqueUI CLI

npx uniqueui add horizontal-scroll-gallery

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/horizontal-scroll-gallery.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

End of Gallery

Usage

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

export default function Example() {
  const images = [
    <img key="1" src="https://images.unsplash.com/photo-1681935396624-006f4acdc530?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Landscape 1" className="object-cover w-full h-full" />,
    <img key="2" src="https://images.unsplash.com/photo-1775059956734-78ffd2075cec?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Landscape 2" className="object-cover w-full h-full" />,
    <img key="3" src="https://images.unsplash.com/photo-1722152246589-23370458081f?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Landscape 3" className="object-cover w-full h-full" />,
    <div key="4" className="w-full h-full bg-neutral-900 flex items-center justify-center p-8 text-center text-white">
      <h3 className="text-4xl font-bold">End of Gallery</h3>
    </div>
  ];
  return (
    <HorizontalScrollGallery items={images} />
  );
}

Props

Prop	Type	Description
`items`	`React.ReactNode[]`	Array of React nodes (e.g. images, cards) to map across the horizontal track.
`direction`	`"left" \| "right"`	Direction the track moves when the user scrolls down.
`itemClassName`	`string`	Common classes applied to every individual container.