Image Generation

Queued · #2

Layered desert ridges at golden hour, warm haze, minimalist poster

1024 × 1024 · 4 steps

Installation

pnpm dlx shadcn@latest add @paneui/image-generation

Usage

import { ImageGeneration } from "@/components/ui/image-generation"

<ImageGeneration status="generating" progress={0.4} prompt="A lighthouse at dusk">
  <img src={src} alt="" />
</ImageGeneration>

Examples

Statuses

Controlled Progress

Aspect Ratio

Error and Retry

Motion

Under reduced motion the grain, dot grid and scan sweep stop animating, the media no longer scales, and state changes apply instantly.

Accessibility

The frame is role="img": while working it reads the status and percentage, once complete it reads alt (falling back to prompt). The caption actions stay inert until complete.

API Reference

ImageGeneration

Fixed-frame surface that refines generated media in place. Also accepts every prop of figure.

children: ReactNode; The generated media (img, canvas, svg). Rendered from the start so it can refine in place.
status= "generating": "queued" | "generating" | "refining" | "complete" | "error"; Generation state.
progress: number; 0–1. Drives the blur and grain reveal; defaults per status (0, 0.3, 0.75, 1, 0).
prompt: string; Caption text, also copyable once complete.
meta: ReactNode; Small meta line, e.g. 1024 × 1024 · v6.
queuePosition: number; Queue position shown while queued.
aspectRatio= "1 / 1": CSSProperties["aspectRatio"]; Frame aspect ratio; any CSS aspect-ratio value.
onRetry: () => void; Adds Try again (error) and Generate again (complete).
onDownload: () => void; Adds a Download action once complete.
errorText= "Couldn’t finish this image.": ReactNode; Message in the frame when status is error; pass your own copy or a translation.
retryLabel= "Try again": ReactNode; Label of the error frame's retry button (shown with onRetry).
alt: string; Accessible description of the finished image.
mediaClassName: string; Classes for the layer wrapping children.

Prop	Type	Default	Description
children	ReactNode	—	The generated media (img, canvas, svg). Rendered from the start so it can refine in place.
status	"queued" \| "generating" \| "refining" \| "complete" \| "error"	"generating"	Generation state.
progress	number	—	0–1. Drives the blur and grain reveal; defaults per status (0, 0.3, 0.75, 1, 0).
prompt	string	—	Caption text, also copyable once complete.
meta	ReactNode	—	Small meta line, e.g. `1024 × 1024 · v6`.
queuePosition	number	—	Queue position shown while `queued`.
aspectRatio	CSSProperties["aspectRatio"]	"1 / 1"	Frame aspect ratio; any CSS `aspect-ratio` value.
onRetry	() => void	—	Adds Try again (error) and Generate again (complete).
onDownload	() => void	—	Adds a Download action once complete.
errorText	ReactNode	"Couldn’t finish this image."	Message in the frame when `status` is `error`; pass your own copy or a translation.
retryLabel	ReactNode	"Try again"	Label of the error frame's retry button (shown with `onRetry`).
alt	string	—	Accessible description of the finished image.
mediaClassName	string	—	Classes for the layer wrapping `children`.

data-status: The current status.

Data attribute	Description
data-status	The current `status`.