JJabKit
Theme preference

ImageCropper

1.1.0

Upload a photo, zoom and pan to frame a crop, then preview and download the result.

npx jabkit add image-cropper

Component Data

ID
image-cropper
Category
atoms
Version
1.1.0
Added
2026-09-07
Type
component
Keyboard nav
Yes
Reduced motion
Yes
imagecropuploadzoompreviewatom

Dependencies

  • lucide-react
  • clsx
  • tailwind-merge

Examples

Default

<div className="bg-background p-6 text-foreground">
      <ImageCropper {...imageCropperMocks.default} />
    </div>

Variants

<div className="bg-background p-6 text-foreground">
      <ImageCropper {...imageCropperMocks.widescreen} />
    </div>

RecoverableErrors

<div className="bg-background p-6 text-foreground">
      <ImageCropper {...imageCropperMocks.recoverable} />
    </div>