A profile photo with drop, progress, replace and clear errors, or a sample face.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/avatar-uploadPlayground
Profile photo
Or pick a sample
Empty, drop a file or press Upload
Profile photo
Or pick a sample
Uploading
Profile photo
Or pick a sample
Uploaded
Profile photo
Or pick a sample
Error
Profile photo
Or pick a sample
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/avatar-upload
Accessibility
- The dashed avatar is a labelled button.
- Progress is announced politely, errors as alerts.
- The reason for an error is in the text, not only the ring.
Motion
- The card outlines in 150 ms on drag over, and the photo previews under its progress ring.
- The progress ring follows the upload.
- With reduced motion, the outline and ring change at once.
Responsive behavior
- A row on Web, stacked and centred on Mobile.
Performance
- Object URLs are revoked when replaced, so previews do not leak.
- The upload gets an AbortSignal, so it can stop mid flight.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import AvatarUpload. Props: maxMb, accept, upload, onChange, samples, title, hint, initial, animated.
- upload(file, report, signal) does the work and reports 0 to 100. Without it progress is simulated, as in the demo.
- onChange receives { src, person } or null. initial forces a state and is for specimens and tests.
Related
AvatarComponentA person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.Avatar PickerComponentSpin a coin or pick a face. It lands on the nearest one with real physics.AttachmentComponentA file on its way up or already there, with a drop zone and an upload queue.ProgressComponentShows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.ProfileProBlockA profile page: cover, avatar, bio, links and counts, with tabs between an activity feed and projects.