Image Result Grid

Result gallery with actions and a lightbox. Pro · Image generation › Results and editing

Grid or masonry of generations with selection, hover actions, a details panel and a zoomable viewer.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add image-result-grid

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ImageResultGrid } from 'valyro-ui-pro';

Props

Prop	Type	Default
`items` *	`readonly GeneratedImage[]`		Finished images with their generation parameters, shown as tiles and in the viewer.
`layout`	`'grid' \| 'masonry'`	`'grid'`	`grid` crops to squares; `masonry` keeps every image's aspect ratio.
`minColumnWidth`	`number`	`200`	Narrowest column before the grid drops one. Default 200.
`selectable`	`boolean`	`true`	Checkboxes and a selection bar. Default true.
`selected`	`string[]`		Controlled `selected`; use with `onSelectedChange`.
`defaultSelected`	`string[]`	`[]`	Initial `selected` when uncontrolled.
`onSelectedChange`	`(ids: string[]) => void`		Called with the new `selected` when it changes.
`onAction`	`(action: ImageAction, item: GeneratedImage) => void \| false`		Called for every action. For `download` the grid also saves the file, unless the handler returns `false`.
`actions`	`readonly ImageAction[]`	`ALL_ACTIONS`	Actions offered on tiles and in the viewer. Default: all.
`showDetails`	`boolean`	`false`	Details panel (prompt, seed, parameters, copy) beside the grid for the active image.
`pending`	`number`	`0`	Placeholder tiles while images are on their way (e.g. a running batch).
`renderPending`	`(index: number) => ReactNode`		Rendered inside each pending tile, e.g. a GenerationProgress overlay.
`emptyState`	`ReactNode`		Shown when there are no items and nothing pending, in place of `labels.empty`.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<ImageResultGridLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Generation Progress — Steps, ETA, live latent preview, queue
Image Compare — Before/after comparison: slider, side by side, overlay
Inpaint Canvas — Inpainting mask and canvas outpainting
Generation History — Generation history by day, with filters
Image Adjustments — Color grading: upload, fit and seven filter sliders
Prompt Editor — Prompt and negative prompt: weights, LoRA, autocomplete, token count
Generation Settings — Model, sampler, steps, CFG, size, presets
Aspect Ratio Picker — Aspect ratio and exact size
Seed Input — Seed: random, fixed, increment
LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
Style Presets — Style cards with previews and weights
Reference Image Input — Reference image for img2img and ControlNet

Previous: Generation Progress · Next: Image Compare · All Image generation