Resolution pickerPro
Base size and upscale factor with pixel size, megapixels and credit cost on every choice, and plan limits that lock larger choices with an upgrade.
On this page
ProBase size and upscale for a 3:2 render, each with pixels, megapixels and credits.
Installation
Usage
import { ResolutionPicker } from "@/components/ui/chatcn/pro/resolution-picker"
<ResolutionPicker aspectRatio="3:2" maxMegapixels={8} onUpgrade={openPlans} />Sizes follow the aspect ratio and snap to a multiple of 64. The default price is 1.5 credits per base megapixel, rounded up, plus 2 for a 2× upscale and 6 for 4×; pass cost to use yours. When a bigger base pushes the current upscale over the limit, the upscale drops to the largest that fits.
Examples
Plan limits
ProA plan capped at 8 MP: larger choices lock with the reason and an upgrade.
States
ProA portrait ratio with custom sizes and pricing and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
aspectRatio | string | Default 1:1 |
sizes | { value, label? }[] | Long edges. Default 1K, 1.5K, 2K |
upscales | number[] | Default 1, 2, 4 |
value, defaultValue, onValueChange | { size, upscale } | The change also gets the full choice |
cost | (choice) => number | |
maxMegapixels, upgradePlan, onUpgrade | Lock and explain larger choices | |
step | number | Snap. Default 64 |
Keyboard
| Key | Action |
|---|---|
Tab | Move between the size and upscale groups |
← → ↑ ↓ | Select the next choice, skipping locked ones |
Home, End | First or last choice |
Accessibility
- Two radio groups. Each choice is named with its size, megapixels and price: "1.5K, 1536 by 1024, 1.6 MP, 3 credits".
- Locked choices stay in the group with
aria-disabledand a tooltip that names the limit; the lock icon backs the gray. - The output size and total are announced politely after each change.
Motion
- The output numbers swap with a 150 ms blur crossfade after a click and at once from the keyboard.