Horizontal Scroll Gallery

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

npx uniqueui add horizontal-scroll-gallery

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-1682687982501-1e58f8108c6b" alt="Landscape 1" className="object-cover w-full h-full" />,
    <img key="2" src="https://images.unsplash.com/photo-1682687220063-4742bd7fd538" alt="Landscape 2" className="object-cover w-full h-full" />,
    <img key="3" src="https://images.unsplash.com/photo-1682687981922-7b55dbb3086b" 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.