A profile photo uploader with round cropping and a progress ring.
"use client"
import { toast } from "sonner"
import { AvatarUpload } from "@/components/avatar-upload"
export default function AvatarUploadExample() {
return (
<AvatarUpload
onChange={(item) =>
toast(item ? "Profile photo updated" : "Profile photo removed")
}
/>
)
}
Installation
npx shadcn@latest add @uploadcn/avatar-uploadUsage
import { AvatarUpload } from "@/components/avatar-upload"<AvatarUpload
src={user.image}
onChange={(item) => updateUser({ image: item?.result?.url ?? null })}
/>Props
Prop
Type