Image Generation
A frame for an image an AI is making: a dither field that churns while it is queued and generating, tightens while it refines, and gives way to the finished image; with a status line and a retry on error. The dither follows a fine pointer.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| status | "queued" | "generating" | "refining" | "complete" | "error" | — | Where the generation is. |
| children | ReactNode | — | The finished media: an img, a canvas, a video. |
| prompt | string | — | What was asked for; also the default accessible description. |
| label | string | — | The accessible description, if not the prompt. |
| resolution | string | — | Shown in the status line. |
| aspectRatio | CSS aspect-ratio | — | The space reserved before the media arrives. |
| size | "compact" | "fluid" | — | Fixed or filling its container. |
| interactive | boolean | — | Lets the dither follow a fine pointer. |
| statusText | string | — | Replaces the status line's text. |
| showStatus | boolean | — | Shows the status line. |
| onRetry | () => void | — | Offers a retry when it fails. |
| frameClassName | string | — | Classes for the media frame, such as a height and radius. |
| className | string | — | Classes for the root element. |