Image Zoom Controlled 1 - Controlled zoom state

Pro

Image zoom with controlled isZoomed state and a toggle button.
Shadcn Image Zoom Controlled 1 component

Component data

ID
image-zoom/image-zoom-controlled-1
Access
pro
Created
Jul 30, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Image Zoom Controlled 1 component design & features

This example controls ImageZoom with isZoomed and onZoomChange so an external button can open the zoom overlay.

Controlled zoom helps guided tours and accessibility flows that need programmatic focus on media.