@gallerykit/grid

@gallerykit/grid registers a grid layout with the GalleryKit registry. It supports infinite scroll, load-more, and paged pagination modes, custom aspect ratios, and virtualization through @tanstack/react-virtual.

Both the <Grid> component and the useGalleryGrid hook are exposed for direct use or custom rendering.

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

Install

pnpm add @gallerykit/grid

Quick example

import { Grid } from "@gallerykit/grid";

const items = Array.from({ length: 24 }, (_, i) => ({
  id: String(i),
  src: `/photo-${i}.jpg`,
  alt: ""
}));

export default function Page() {
  return <Grid items={items} columns={{ base: 2, md: 3, lg: 4 }} aspectRatio="square" />;
}

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