AI Image Generation Grid React component
A text-to-image workspace: a prompt panel with aspect ratio, style, model and seed controls, a feed of four-image runs that denoise step by step, hover actions to vary, upscale or like each image, and a lightbox with download.
About the AI Image Generation Grid component
AI Image Generation Grid is the main screen of a text-to-image tool. You describe a picture, choose its shape, a look and a model, and four results appear side by side, each sharpening out of noise step by step the way diffusion models work.
Every run stays in the feed with its prompt and settings, so you can compare and go back. Hover an image to make four variations of it, upscale it to twice the size or like it, and open it full size to flip through the set and download the one you want. A credit counter shows what each run costs.
When to use it
Use it for AI art and design tools, marketing image generators, product mock-up tools, or as the image tab of a bigger AI app.
Keep style names short and visual, and show the credit cost on the Generate button so people know what a run costs before they press it.
Installation
Add the AI Image Generation Grid component to your project with the shadcn CLI. It lands in components/ai-image-generation-grid.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/ai-image-generation-gridOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<AIImageGenerationGrid /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| sets Photo sets the demo "generates" from. Each needs four images. | { id: string; keywords: string[]; images: string[] }[] | DEFAULT_SETS |
| presets | string[] | DEFAULT_PRESETS |
| credits | number | 120 |
| modelName | string | "Prism 2" |
| onGenerate Called when a generation starts; wire it to your image API. | (req: { prompt: string; aspect: Aspect; style: Style; model: Model; seed: number }) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- sets
Photo sets the demo "generates" from. Each needs four images.
{ id: string; keywords: string[]; images: string[] }[]Default: DEFAULT_SETS - presetsstring[]Default: DEFAULT_PRESETS
- creditsnumberDefault: 120
- modelNamestringDefault: "Prism 2"
- onGenerate
Called when a generation starts; wire it to your image API.
(req: { prompt: string; aspect: Aspect; style: Style; model: Model; seed: number }) => void - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
AI Image Generation Grid FAQ
- Does it call a real image model?
- No. It shows the whole flow with demo photo sets: a prompt is matched to a set by its words, and styles are CSS filters. Start your real job in onGenerate and feed the returned images in as sets or replace the tile images with your own state.
- How does the generating effect work?
- Each tile starts blurred, grey and covered in fractal noise, then clears as its progress goes from 0 to 1, with a step counter based on the model (30 steps for Quality, 8 for Turbo). Tiles start a moment apart, and the clock only runs while something is generating or upscaling.
- What do Vary and Upscale do here?
- Vary adds a new run of four re-framed versions of the chosen image: different crops, zoom, a mirror and small hue shifts. Upscale shows progress, then marks the image 2× and doubles the pixel size shown in the lightbox. Both use credits.
- What does the seed lock do?
- With the seed unlocked every run gets a new random seed. Lock it to reuse the same seed, which with a real model gives you similar images when you only change the wording.
- Is it accessible?
- Aspect, style and model are radio groups, the seed lock and likes are toggle buttons, each finished image is a button that opens a labelled modal lightbox, arrow keys move between images, Escape closes and returns focus, and progress is announced politely. With reduced motion the results appear straight away.
