Components
Loading preview...
Here is Image Crop component
npx shadcn@latest add https://21st.dev/r/originui/image-cropimport {
Cropper,
CropperCropArea,
CropperDescription,
CropperImage,
} from "@/components/ui/image-crop"
export default function Component() {
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-background p-8">
<Cropper
className="h-96 w-full max-w-2xl"
image="https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-06_dduwky.jpg"
>
<CropperDescription />
<CropperImage />
<CropperCropArea className="rounded-full" />
</Cropper>
<p
aria-live="polite"
role="region"
className="text-muted-foreground mt-2 text-xs"
>
Cropper with full-rounded mask ∙{" "}
<a
href="https://github.com/origin-space/image-cropper"
className="hover:text-foreground underline"
target="_blank"
>
API
</a>
</p>
</div>
)
}