ImageGen

AI image generation component with full lifecycle support: idle, pending, generating, done, and error. Features shimmer placeholders, progress bars, blur-reveal transitions, and a toolbar for download and retry actions.

ImageGen — Live Demo

ImageGen — All 5 States

Import

tsx

import { ImageGen } from "@arc-lo/ui";

Basic usage

tsx

<ImageGen.Root
  state={state}
  src={imageSrc}
  alt="AI-generated image"
>
  <ImageGen.Placeholder />
  <ImageGen.Preview />
  <ImageGen.Progress progress={progress} />
  <ImageGen.ErrorFallback />
</ImageGen.Root>

With all parts

tsx

<ImageGen.Root
  state={state}
  src={imageSrc}
  alt="Generated landscape"
  aspectRatio="16/9"
  prompt="A serene mountain landscape at sunset"
  blurReveal
  onRetry={() => regenerate()}
  onDownload={() => saveImage()}
>
  <ImageGen.Placeholder />
  <ImageGen.Preview />
  <ImageGen.Overlay />
  <ImageGen.Progress progress={progress} />
  <ImageGen.ErrorFallback message="Generation failed. Please try again." />
  <ImageGen.Toolbar>
    <ImageGen.Download />
    <ImageGen.Retry />
  </ImageGen.Toolbar>
</ImageGen.Root>

States

State	Description	Visible parts
`idle`	No generation started	Placeholder
`pending`	Waiting for generation to begin	Placeholder, Overlay, Progress
`generating`	Image is being generated	Preview (blurred), Overlay, Progress
`done`	Generation complete	Preview (clear), Toolbar
`error`	Generation failed	ErrorFallback

Props

Root

Prop	Type	Default	Description
`state`	`ImageGenState`	—	Current generation state
`src`	`string \| null`	—	Image source URL
`alt`	`string`	—	Alt text for the generated image
`aspectRatio`	`string`	`"1/1"`	CSS aspect ratio for the image container
`prompt`	`string`	—	The generation prompt (for context)
`blurReveal`	`boolean`	`true`	Animate blur-to-clear transition on completion
`onRetry`	`() => void`	—	Called when user clicks retry
`onDownload`	`() => void`	—	Called when user clicks download