Components
Loading preview...
A reusable React image uploader with cropping support for Next.js. Supports drag & drop, file validation, fixed size or aspect ratio cropping. Includes live preview, error handling, and integration-ready callbacks.
npx shadcn@latest add https://21st.dev/r/info-mdshakeeb/image-cropper// this will suport react hook form
/* <FormItem>
<FormLabel>Profile Picture</FormLabel>
<FormControl>
<ImageCropper
aspectRatio={1}
onChange={field.onChange}
onBlur={field.onBlur}
value={field.value}
error={form.formState.errors.photo?.message}
className="w-48"
/>
</FormControl>
<FormMessage />
</FormItem> */
// you need to modify the shadcn dialog for modal width
import { ImageCropper } from "@/components/ui/image-cropper";
export default function DemoOne() {
return <ImageCropper
// aspectRatio={1}
/>;
}