Avatar Uploader

Circular avatar with a dark camera button on the corner that invites a new profile photo.

Change profile photo

Import & use

import { Upload5 } from "@/components/beste/piece/upload5";

<Upload5
  imageSrc="https://images.unsplash.com/photo-1668262958669-f29c727d5a74?w=200&auto=format&fit=crop&q=90"
  alt="Profile photo"
  initials="BS"
  caption="Change profile photo"
  tone="primary"
/>

More Upload pieces

View all Upload

Scan the receiptPoint the camera at the total line

Camera Capture

Dark viewfinder mock-up with corner brackets, a live dot, and a large circular capture button.

Attach supporting documents

Compact Attach

Single-line upload affordance with a paperclip icon, prompt copy, and a trailing browse button.

Add a cover imageRecommended 1600 × 600, up to 4 MB

Cover Uploader

Gradient banner placeholder that prompts a cover image with size hint and inset dashed border.

Drag files to uploador click to browse your device

Drop Zone

Dashed upload surface centered on a cloud icon, with headline, subtitle, and a select button.

brand-hero.jpg2400 × 1600 · 1.4 MB

Image Row

Compact image file row with a square warm gradient preview and a filename plus dimensions line.

Q2-forecast-final.xlsx2.1 MB · Uploaded 2 seconds ago

Upload Complete

Success confirmation row with an emerald border, corner check overlay on the file tile, and an Open button.