# Product gallery

A product gallery with a hover magnifier, gliding thumbnails, and color and size variants that crossfade photos.

- ID: `product-gallery`
- Import: `animui/product-gallery`
- Category: Special
- Runtime exports: `ProductGallery`, `isSoldOut`
- Declaration: `types/pro/product-gallery.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: lightbox-gallery, carousel, photo-grid, segmented-control, radio-group

```tsx
import { ProductGallery } from 'animui/product-gallery';
```

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 product-gallery` 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 ProductGalleryColor { id: string; label: string; color?: string; image?: string; }
export interface ProductGallerySize { id: string; label: string; available?: boolean; }
export interface ProductGalleryProps {
  colors: ProductGalleryColor[];
  sizes?: ProductGallerySize[];
  color?: string;
  defaultColor?: string;
  onColorChange?: (color: string) => void;
  size?: string | null;
  defaultSize?: string | null;
  onSizeChange?: (size: string | null) => void;
  index?: number;
  defaultIndex?: number;
  onIndexChange?: (index: number) => void;
  zoom?: number;
  magnifier?: boolean;
  aspectRatio?: number;
  label?: string;
  header?: ReactNode;
  footer?: ReactNode;
  className?: string;
  ref?: Ref<HTMLDivElement>;
}

export interface isSoldOutProps {
  size: ProductGallerySize;
  color: string;
}

export declare const ProductGallery: ComponentType<ProductGalleryProps>;
export declare function isSoldOut(size: ProductGallerySize, color: string): boolean;

export default ProductGallery;
```