Pro

Image zoom

An image in a page that opens to fill the screen from where it sits: press it and it grows out of its own place with the page dimmed behind. Escape, a press anywhere, scrolling or resizing put it back and return focus to it.

Pro

pnpm dlx shadcn@latest add @caliper/image-zoom

Site visit · Harbour office

Notes from Thursday. Press a photo to see it larger.

The terrace takes six desks in summer; the quay side is quiet until noon. Power runs along the north wall only.

Installs components/ui/image-zoom.tsxDepends on none beyond ReactMotion honours reduced motion

When to use

Use it for

Screenshots and photos in docs, changelogs and reports that are worth a closer look.
Single images; a set of images belongs in the image viewer.

Skip it when

Galleries people page through; use the image viewer.
Detail inspection at high zoom; use the zoom lens.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

One transform: The open image is placed once at its fitted size and transformed from and back to its inline box, so only transform animates.
Sharper on demand: zoomSrc loads a larger file only when it opens; without it the image never grows past its own pixels.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/image-zoom

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { ImageZoom } from "@/components/ui/image-zoom"

The worked example comes with Pro

The 27-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

ImageZoom

component

PropTypeDefaultDescription

src *string—

zoomSrcstring—A sharper file for the open view.

alt *string—

width *number—The image's pixel size, so the space is held before it loads.

height *number—

classNamestring—

imageClassNamestring—

It exposes dialog semantics, with aria-label, aria-haspopup and aria-modal kept in step with state.

KeyBehaviour

EscapeCloses or cancels, then returns focus to where it came from.

EnterActivates the focused control.

SpaceActivates the focused control.

TabMoves focus through the part's focusable elements.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.