Search

Search components and blocks

Sign in

Image Generation

A generation card laid out like a render job. A step bar (Compose, Render, Refine, Upscale) carries a sliding highlight with a shimmering active label and checkmarks on finished steps, next to a live percentage. Below, the scene is hidden under an ordered-dither cover: as progress climbs, pixels switch off against a Bayer threshold, left edge first, until the scene is fully revealed and settles into place. A hairline progress bar runs along the bottom edge; the footer holds the prompt, output size and a Replay button.

pnpm dlx shadcn@latest add @ditherui/image-generation
ComposeRenderRefineUpscale
0%

“a misty mountain range under a full moon”

1024 × 1024

Install

$ pnpm dlx shadcn@latest add @ditherui/image-generation

Props

promptstring"a misty mountain range under a full moon"
sizestring"1024 × 1024"
durationnumber6000
className / ...div propsReact.ComponentProps<"div">—

When to use the image generation card

Use it for AI image tools. The card is laid out like a render job with steps Compose, Render, Refine and Upscale and a live percentage.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components