A person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/avatarPlayground
Photo
Content
Circle sizes
Rounded, for teams
Badge
Badge on each size
Ring
Group
+3
Group sizes
+3
+3
+3
Click to swap the person, then the badge
Content
Size
Shape
Badge
Icons animation
Ring
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/avatar
Circle sizes
20, 28, 36, 44 and 64 px.
Shape
Ring
Accessibility
- Give photos alt text with the name. Use empty alt when a visible name sits next to the avatar.
- Presence is announced in text, never by colour alone.
- The group is a labelled group, and +N says how many more.
Motion
- Images fade in over 200 ms on the Loading fill, and fall back to the person, then initials, on error.
- Changing the person crossfades and settles on a 420 ms spring.
- A new badge pops 0 to 1.15 to 1 in 240 ms.
- A live ring turns once every 1200 ms and pauses off screen.
- Group hover spreads the faces in 150 ms.
- With reduced motion, the person crossfades in 120 ms, the ring holds still and the group stays put.
Responsive behavior
- 20, 28, 36, 44 and 64 px on both platforms.
- Group faces follow Button sizes: 28, 36, 44 on Web and 36, 44, 52 on Mobile, so the Add button always matches.
Performance
- Only the live ring loops. It is CSS and pauses off screen.
- A real photo fades in over the Loading fill, then Motion goes idle.
- AvatarGroup renders only the first max faces.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Avatar, AvatarGroup, AvatarBadge. Sources fall back in order: src, person, initials, icon.
- Set alt to the person's name, or leave it empty when a visible name sits beside it.
- person picks an illustration and is for samples. Replace it with src in production.
- AvatarGroup needs label. overflow is none, count or add; pass onCountClick and onAdd to make those act.
Related
Avatar UploadComponentA profile photo with drop, progress, replace and clear errors, or a sample face.Avatar PickerComponentSpin a coin or pick a face. It lands on the nearest one with real physics.BadgeComponentA short label that names a status or a category. The pill stays ink and the mark carries the tone.ItemComponentA row that shows one thing: media, a title, a description and an optional action.MembersComponentWorkspace members: seat usage, an invite row, the member list with activity and roles, and pending invites.