Pro
Image crop
Crop an image before it is uploaded. Drag the frame to move it and a handle to resize it; a rule-of-thirds grid shows while you work. A fixed shape keeps only the corner handles, and every move works from the keyboard.
pnpm dlx shadcn@latest add @caliper/image-cropWorkspace cover
Shown across the top of every page.
Drag the frame or a handle
When to use
Use it for
- Avatars, covers and product photos that must fit a known shape.
- Trimming a screenshot or scan before it is attached.
Skip it when
- Editing beyond the crop (rotate, filters); that is a media editor.
- Images the canvas cannot read: cross-origin files without CORS cannot be exported.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Fractions, not pixels
- The crop is reported as fractions of the image, so it holds at any displayed size;
cropImageturns it into a file at the image's own resolution. - Keys move and resize
- Arrows move the focused frame or handle by 1%, with Shift for 10%; each part announces what it does.
Styling
- Shade by shadow
- The dimmed area outside the frame is the frame's own spread shadow clipped by the image, so it never lags behind a drag.
Installation
pnpm dlx shadcn@latest add @caliper/image-crop
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. It is built from ImageCrop, cropImage, centredCrop and resizeCrop.
import { ImageCrop, cropImage, centredCrop, resizeCrop } from "@/components/ui/image-crop"
The worked example comes with Pro
The 61-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
API reference
ImageCrop
component
cropImage
component
No props of its own; it accepts the native props of its root element.
centredCrop
component
No props of its own; it accepts the native props of its root element.
resizeCrop
component
Accessibility
It exposes group and button semantics, with aria-roledescription and aria-label kept in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.