Standard

Example gallery

Finished outputs shown with the prompt and settings that produced them, teaching by worked example.

M ReportsNew report · Examples

Start from an example Sample workspace data

Try it: Pick an example to see the exact prompt and settings behind it, then Use this prompt and run it on your own data.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

Midjourney Explore page with For You, Random, Hot, Top Day and Likes tabs above a grid of community images, one hovered with reuse-image, reuse-prompt, search and like buttons — Midjourney
Midjourney's Explore feed shows finished community images. Hover shortcuts let you reuse an image's prompt or the image itself in your own generation.
Source: Midjourney docs ↗

When to use

Generative tools where quality depends on prompt craft the user has not learned yet.

Seen in

Midjourney explore feed, Runway templates, Firefly community gallery, Lovable showcase.

For engineers

Store prompt and parameters with each sample so "use this" reproduces it exactly.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Example gallery" pattern: `ExampleGallery`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
Finished outputs shown with the prompt and settings that produced them, teaching by worked example.

Use it when: Generative tools where quality depends on prompt craft the user has not learned yet.

## What to build
A grid of finished outputs, each shown with the exact prompt and settings that produced it and an honest note on how many tries it took. A person can open any example to read its recipe and reuse it in one click, which reproduces it exactly. It renders on a new-item screen or an explore page.

### Props
- `examples`: Array<{ id: string; title: string; preview: ReactNode; prompt: string; params: Record<string, string | number>; attempts: number; edited: boolean; dataNote?: string }>, every example carries its stored prompt and parameters.
- `selectedId?`: string and `onSelect(id: string | null)`, controlled selection of the example whose recipe is open.
- `onUse(example: { prompt: string; params: Record<string, string | number> })`: loads the stored recipe into the editor. The component never runs it itself.
- `onCopyPrompt?(id: string)`: copies only the prompt text.
- `status`: "loading" | "ready" | "empty" | "error".
- `columns?`: 1 | 2 | 3, the grid width hint; the component drops to 1 column in narrow containers.

### States it must render
- Loading: placeholder cards with the same shape as real ones.
- Ready: cards with preview, title and a provenance tag such as "First try, unedited" or "Second try".
- Recipe open: the selected card shows the full prompt, each parameter as a label and value, and Use this and Copy prompt actions.
- Empty: a short line that no examples are available, without placeholder art.
- Error: the gallery failed to load, with retry.

### Interactions
- Selecting a card opens its recipe; selecting it again or pressing Escape closes it.
- Use this calls `onUse` with the stored prompt and parameters verbatim, never a paraphrase.
- Copy prompt calls `onCopyPrompt` and confirms briefly next to the button.

### Edge cases
- An example missing its stored prompt or parameters must not render a Use this button; show "Recipe not available" so the gallery never promises a reproduction it cannot give.
- An example that took several attempts or was edited: say so on the card face, not only inside the recipe.
- An example made from sample data: show `dataNote` (e.g. "Sample workspace data") so a person knows their own results will differ.
- A parameter the current product no longer supports: mark it in the recipe and still pass it in `onUse` for the parent to handle.

## Must avoid
A gallery of cherry-picked hero results that sets an expectation the user's own runs never meet.

## Engineering constraint
Store prompt and parameters with each sample so "use this" reproduces it exactly.

## Accessibility
- Each card is a button with `aria-expanded` labelled by its title and provenance; previews need a text alternative from `title`.
- When a recipe opens, keep focus on the card and make the recipe the next element in tab order.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for wayfinders

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Can a first-time user act without typing anything?
Do suggestions reflect the user's actual context, not a generic list?
Is the system's boundary stated somewhere findable?
Do nudges stop appearing once the behaviour is learned?