Avatar Uploader

Component 205

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar Uploader to your project and fits it to your theme.

Code

How Avatar Uploader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import 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://cdn.21st.dev/assets/mirror/fe/fe3bd146ffab3bc5195ab531bc8a654c1ead507f91248bf93c67f149cd0f55dc.png',
	);

	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>
	);
}