A generated image from waiting to done: “Generating image” shimmers over a drifting placeholder, then the time it took and the image washing in, with download, regenerate and feedback.
A quiet valley at dawn, soft light
Generating image
pnpm dlx shadcn@latest add @latheui/image-resultPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Image Result is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native figure attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| status* (required) | "generating" | "done" | "error" | — | Where generation is. |
| src | string | — | The finished image. |
| alt* (required) | string | — | Describes the image. Also used to name the download. |
| seconds | number | — | How long it took. Measured from generating to done when left out. |
| aspectRatio | string | "1 / 1" | The frame's shape, so nothing jumps when the image arrives. |
| onRegenerate | () => void | — | Shows a regenerate button, also after a failure. |
| onDownload | () => void | — | Replaces the built-in download of src. |
| feedback | "up" | "down" | null | — | The rating, when controlled. |
| defaultFeedback | "up" | "down" | null | null | Starting rating. |
| onFeedback | (feedback: "up" | "down" | null) => void | — | Shows thumbs up and down. |
| generatingLabel | string | "Generating image" | Header text while it works. |
| errorLabel | string | "Couldn't create the image" | Header text when it fails. |
<ImageResult status={status} src={src} alt={prompt} aspectRatio="16 / 9" className="max-w-2xl" />