Avatar Upload

Component

About

Click or drop an image, crop it to a circle or square with zoom, and preview the result. Initials fallback, size and type limits, remove control.

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

Code

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

Usage.tsx

import {
  AvatarUpload,
  AvatarUploadPreview,
  AvatarUploadTrigger,
  AvatarUploadInput,
  AvatarUploadRemove,
  AvatarUploadCropDialog,
  AvatarUploadError,
} from "@/components/ui/avatar-upload";

export default function AvatarUploadDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <AvatarUpload maxSize={5 * 1024 * 1024}>
        <AvatarUploadPreview fallback="JD">
          <AvatarUploadTrigger />
          <AvatarUploadRemove />
        </AvatarUploadPreview>
        <AvatarUploadInput />
        <AvatarUploadCropDialog />
        <AvatarUploadError />
      </AvatarUpload>
    </div>
  );
}