Docs / Components / Image Generation
Image Generation
An AI image generation card that transitions from an animated multi-color gradient blob loading state into a smooth top-to-bottom blur-fade image reveal.
Stingrays gliding through turquoise shallows, shot from above
Dependencies
Install the following dependencies to use this component:
1npm install motion clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add image-generation
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | undefined | Image source URL to reveal once generation is complete. |
| alt | string | 'Generated image' | Accessible alt text for the generated image. |
| isLoading | boolean | false | Whether the image is currently being generated. Shows animated blob loader when true. |
| width | number | string | '100%' | Width of the card. |
| height | number | string | 400 | Height of the card in pixels. |
| prompt | string | undefined | Optional prompt text shown subtly inside the loading state. |
| className | string | '' | Additional CSS classes. |