Components
Loading preview...
Here is Image Crop component
npx shadcn@latest add https://21st.dev/r/originui/image-crop"use client"
import React from "react"
import {
Cropper,
CropperCropArea,
CropperDescription,
CropperImage,
} from "@/components/ui/image-crop"
type Area = { x: number; y: number; width: number; height: number }
export default function Component() {
const [cropData, setCropData] = React.useState<Area | null>(null)
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"
cropPadding={20}
image="https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-09_qskkln.jpg"
onCropChange={setCropData}
>
<CropperDescription />
<CropperImage />
<CropperCropArea />
</Cropper>
{cropData && (
<pre className="bg-muted text-foreground/80 overflow-auto rounded-md border px-4 py-3 font-mono text-xs">
<code>{JSON.stringify(cropData, null, 2)}</code>
</pre>
)}
</div>
<p
aria-live="polite"
role="region"
className="text-muted-foreground mt-2 text-xs"
>
Cropper with crop data output ∙{" "}
<a
href="https://github.com/origin-space/image-cropper"
className="hover:text-foreground underline"
target="_blank"
rel="noopener noreferrer"
>
API
</a>
</p>
</div>
)
}