Components/Tool & Action States

Image Generation

A shimmering canvas placeholder while an image is being generated.

Component by

Kevin

Preview

1024 × 1024

Generating image“a calm mountain lake at dawn”

Install

Adds the component files through the shadcn CLI.

shadcn

npx shadcn@latest add https://www.aicss.dev/r/image-generation.json

Code

import styles from "./ImageGeneration.module.css";

export function ImageGeneration({
  prompt = "a calm mountain lake at dawn",
  resolution = "1024 × 1024",
}: {
  prompt?: string;
  resolution?: string;
}) {
  return (
    <div className={styles.igWrap}>
      <div className={styles.igCanvas} role="img" aria-label="Generating image">
        <span className={styles.igDots} aria-hidden />
        <span className={styles.igGlow} aria-hidden />
        <span className={styles.igRes}>{resolution}</span>
      </div>
      <div className={styles.igMeta}>
        <span className={styles.igLabel}>Generating image</span>
        <span className={styles.igPrompt}>“{prompt}”</span>
      </div>
    </div>
  );
}