Image model pickerPro
Image models as cards you judge by eye: sample mosaics, speed, a quality meter and cost per image, New and Beta labels, locked models and compare two side by side.
On this page
ProModel cards with samples, speed, quality and cost, two picked for compare.
Installation
Usage
import { ImageModelPicker } from "@/components/ui/chatcn/pro/image-model-picker"
<ImageModelPicker models={models} value={model} onValueChange={setModel} />A visual variant of the free model-picker: where that one lists chat models by provider, this one shows what each image model makes. layout="grid" lays cards out in place with compare, layout="list" is dense rows for menus, and layout="popover" is a compact trigger.
Examples
Popover
ProA compact trigger for a toolbar that opens the cards.
States
ProLoading, no models, long text, broken samples and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
models | StudioImageModel[] | credits, speed, quality, samples, badge, disabled, disabledReason |
value, defaultValue, onValueChange | string | |
layout | "grid" | "list" | "popover" | Default grid |
comparable | boolean | Default true in the grid |
compare, defaultCompare, onCompareChange | string[] | Up to two ids |
onUpgrade | (model) => void | Shows Upgrade on locked models |
loading, disabled, columns, label |
Keyboard
| Key | Action |
|---|---|
← → | Previous or next model (mirrored in RTL) |
↑ ↓ | Model in the row above or below |
Home, End | First or last available model |
Accessibility
- A radio group; each card is named with speed, quality and cost: "gpt-image-1, ~9 s per image, quality 5 of 5, 4 credits per image".
- New is filled and Beta is outlined, so the labels differ by shape. The better value in compare is marked in text, not only by the accent bar.
Motion
- Samples fade in as they load. The compare panel rises 4 px with a fade in 180 ms and its bars grow from the start edge in 280 ms.