Image Crop

Component 23

About

Here is Image Crop component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Crop to your project and fits it to your theme.

Code

How Image Crop is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { useState } from "react"

import {
  Cropper,
  CropperCropArea,
  CropperDescription,
  CropperImage,
} from "@/components/ui/image-crop"
import { Slider } from "@/components/ui/slider"

export default function Component() {
  const [zoom, setZoom] = useState(1)

  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-background p-8">
      <div className="flex w-full flex-col gap-4">
        <Cropper
          className="h-96 w-full max-w-2xl"
          image="https://cdn.21st.dev/assets/mirror/0b/0b63cf1e3c7271c73beba8108250f0b142bebc4665ff4ffcaec774aab1a7c315.jpg"
          zoom={zoom}
          onZoomChange={setZoom}
        >
          <CropperDescription />
          <CropperImage />
          <CropperCropArea />
        </Cropper>
        <div className="mx-auto flex w-full max-w-80 items-center gap-1">
          <Slider
            defaultValue={[1]}
            value={[zoom]}
            min={1}
            max={3}
            step={0.1}
            onValueChange={(value) => setZoom(value[0])}
            aria-label="Zoom slider"
          />
          <output className="block w-10 shrink-0 text-right text-sm font-medium tabular-nums">
            {parseFloat(zoom.toFixed(1))}x
          </output>
        </div>
      </div>

      <p
        aria-live="polite"
        role="region"
        className="text-muted-foreground mt-2 text-xs"
      >
        Cropper with zoom slider ∙{" "}
        <a
          href="https://github.com/origin-space/image-cropper"
          className="hover:text-foreground underline"
          target="_blank"
        >
          API
        </a>
      </p>
    </div>
  )
}