Resolution Picker
Pick an output size tier as the BFL API takes it, each showing the pixels it comes to at the chosen aspect ratio.
In use
Next to the aspect ratio in settings, with the picked model's tiers. Costs scale with the tier's megapixels.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/resolution-picker.jsonResolutionPicker
A radio group, paired with the Aspect Ratio Picker. FLUX 3 Image and Video take the value as resolution. FLUX.2 is sized by pixels: send toDimensions(ratio, { area: megapixels * MEGAPIXEL }) as width and height. Also takes Base UI's RadioGroup props.
| Prop | Type | Default |
|---|---|---|
| value / defaultValue | stringThe tier's value, e.g. "2k". Controlled with onValueChange. | — |
| onValueChange | (value: string) => voidCalled with the picked tier's value. | — |
| resolutions | { value, label?, megapixels }[]Tiers, in order. value is what the API takes, megapixels the output area: it sizes the shown pixels and your pricing. | RESOLUTIONS.flux3Image |
| aspectRatio | AspectRatioShows each tier's width × height at this ratio. None for "auto". | — |
Helpers
| Prop | Type | Default |
|---|---|---|
| RESOLUTIONS | Record<string, Resolution[]>Tiers per model. flux3Image: 768sq to 4k, square-equivalent (1k is 1024²). flux3Video: hd to uhd, named by their 16:9 frame (hd is 1280×720). flux2: 0.25 to 4 MP. | — |
| closestResolution | (resolutions, megapixels) => ResolutionThe tier nearest an area: keeps the size when the model, and with it the tiers, changes. | — |
| MEGAPIXEL | number1024², for toDimensions' area. | — |