Aspect Ratio Picker
Pick an output shape as the API spells it. Each option draws its frame, so the choice reads at a glance.
In use
In the Playground's settings, its options following the picked model. The trigger draws its frame. The Image Edit Studio's Expand uses it to shape the canvas.
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/aspect-ratio-picker.jsonAspectRatioPicker
A radio group: arrow keys move between options. Also takes Base UI's RadioGroup props, like disabled and name for forms.
| Prop | Type | Default |
|---|---|---|
| value | AspectRatio // "16:9" | "auto" | …The selected ratio, as the API's aspect_ratio takes it. | — |
| onValueChange | (value: AspectRatio) => voidCalled with the new ratio. | — |
| ratios | readonly AspectRatio[]Options, in order. Presets: flux3Image, flux3Video and kontext. | ASPECT_RATIOS.flux3Image |
| children | ReactNodeYour own AspectRatioPickerItem layout, replacing the generated one. | — |
Helpers
| Prop | Type | Default |
|---|---|---|
| toDimensions | (ratio, { area?, multiple? }) => { width, height }Pixel size at about area pixels, sides a multiple of multiple. For models sized by width and height, like FLUX.2. | 1024², 16 |
| parseAspectRatio | (ratio) => number | undefinedWidth over height; undefined for "auto". | — |
| AspectRatioShape | { ratio }The frame alone, e.g. for a trigger showing the choice. | — |