AI image generatorPro
Prompt to images with style and ratio, shimmer placeholders, likes and a lightbox.
What's inside
- Style and ratio
- Shimmer placeholders
- Lightbox
- Like and download
When to use
- Image generation tools and creative assistants.
When not to use
- Stock photo search: use a search grid.
Installation
Usage
Import it from @/components/blocks/ai-image-generator after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { AiImageGenerator } from "@/components/blocks/ai-image-generator";
export default function Page() {
return (
<main className="mx-auto max-w-6xl p-6">
<AiImageGenerator />
</main>
);
}API reference
AiImageGenerator
Prompt to images with style and aspect controls, suggestion chips, shimmering placeholders, a lightbox gallery, likes and download. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| Enter | Generate |
| Shift+Enter | New line |
| Tab | Reach styles, ratios and results |
Accessibility
- Generation progress is announced; results open in an accessible lightbox with the prompt as alt text.
Motion
- The wand spins while generating; placeholders shimmer; results grow into the lightbox.
Responsive behavior
- Two result columns on phones, four from 640px.
Performance
- Sample results are drawn as SVG, so no image files load.
Notes for AI
- Replace the timeout with your image API and pass returned URLs as src.
This page as Markdown, for assistants and coding agents:
/blocks/ai-image-generator/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt