Avatar
Avatar components for displaying user profile images with fallbacks and status indicators.
CuteAvatar
CuteAvatar is the standard avatar component with preset sizes and a user icon fallback.
With image
When a src is provided, the avatar displays the image with the username as alt text.
System avatar
System mode uses the official cute avatar for system broadcasts and notifications. Falls back to a pink gradient with the logo icon.
Group avatar
Group mode shows a multi-user icon for group conversations.
Username badges
Individual badges
Combinations
Sizes
Two badge types: isVerified (green checkmark) and isFeatured (yellow-red flame). isSystem shows the cute logo avatar instead of a badge. The “cutie” username always gets system mode automatically.
Username with avatar
Size controls avatar, text, badge, and gap together.
Username with full info
Left aligned
Centered
Partial info
When fullName, location, or memberSince are provided, the component switches to a stacked layout. Use the centered prop for profile cards and member grids. Any combination of info props works.
Status indicators
AvatarStatus supports online, offline, busy, and away variants.
Group
Stacked avatars using negative spacing for group displays.
Base primitives
Low-level Avatar, AvatarImage, and AvatarFallback primitives from Radix UI.