# Photo grid

Pinch through zoom levels and open any photo straight from its cell.

- ID: `photo-grid`
- Import: `animui/photo-grid`
- Category: Special
- Runtime exports: `PhotoGrid`
- Declaration: `types/pro/photo-grid.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: carousel, image-compare, cover-flow, dialog

```tsx
import { PhotoGrid } from 'animui/photo-grid';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info photo-grid` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface PhotoGridProps {
  photos: { id: string; src: string; srcSet?: string; alt: string; width: number; height: number; title: string; detail?: string }[];
  title: string;
  zoomLevels?: number[];
  defaultColumns?: number;
  onColumnsChange?: (columns: number) => void;
  defaultFavorites?: string[];
  onFavoriteChange?: (id: string, favorite: boolean) => void;
  onViewerChange?: (id: string | null) => void;
  className?: string;
}

export declare const PhotoGrid: ComponentType<PhotoGridProps>;

export default PhotoGrid;
```