Gallerykit
Masonry

@gallerykit/masonry

@gallerykit/masonry registers a masonry layout with variable-height columns. It supports virtualization through @tanstack/react-virtual and the same pagination modes as grid.

  • Stability: experimental
  • Peer dependencies: react, react-dom, framer-motion (optional), @tanstack/react-virtual (optional)
  • Dependencies: @gallerykit/core

Install

pnpm add @gallerykit/masonry

Quick example

import { Masonry } from "@gallerykit/masonry";

export default function Wall({ items }: { items: GalleryItem[] }) {
  return <Masonry items={items} columns={3} gap={8} />;
}

See Getting Started for the full walkthrough and API for the public exports.