Image Cropper | Zyeon UI

Preview in your theme

shape="round" aspect={1} — an avatar crop. Confirm and the exported Blob becomes an objectURL shown for real on the right, alongside the exported pixel size and the rect in source coordinates.

Loading image…

No crop yet

No crop yet — press Confirm crop.

aspect={16/9} — a cover crop, showing the built-in zoom slider and rotate buttons together (dragging the image, wheel zoom and arrow-key nudges work here too).

Loading image…

No crop yet

No crop yet — press Confirm crop.

A real file picker — a local image is fed straight to the component, and its objectURL is revoked both when the file changes and at unmount.

Pick an image file to start cropping.

aspect="free" — the frame follows the ratio of the image itself instead of being forced into a fixed one.

Loading image…

No crop yet — press Confirm crop.

The error path — src points at an address that does not exist, so the load fails into the error state with a working Retry (the address really is dead, so retrying is expected to fail again; the point is that the panel never goes blank).

Loading image…

disabled — dragging, zooming, rotating and confirming are all locked, and the whole panel dims.

Loading image…

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro