Components
Loading preview...
An interactive avatar uploader with image cropping and preview that supports custom aspect ratios, size limits, and file validation. Perfect for profile pictures, user onboarding flows, and account settings pages.
npx shadcn@latest add https://21st.dev/r/sshahaider/avatar-uploaderimport React from 'react';
import { AvatarUploader } from "@/components/ui/avatar-uploader";
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
export default function DemoOne() {
const [photo, setPhoto] = React.useState<string>(
'https://avatar.vercel.sh/john',
);
const handleUpload = async (file: File) => {
setPhoto(URL.createObjectURL(file));
return { success: true };
};
return (
<div className="relative flex min-h-screen w-full flex-col items-center justify-center">
<div
aria-hidden="true"
className={cn(
'pointer-events-none absolute -top-10 left-1/2 size-full -translate-x-1/2 rounded-full',
'bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]',
'blur-[30px]',
)}
/>
<AvatarUploader onUpload={handleUpload}>
<Avatar className="relative size-20 cursor-pointer hover:opacity-50">
<AvatarImage src={photo} />
<AvatarFallback className="border text-2xl font-bold">
JD
</AvatarFallback>
</Avatar>
</AvatarUploader>
</div>
);
}