Avatar
User image with automatic initials fallback.
shadcn/ui · new-york-v4 · synced Aug 28, 2026shadcn/uinew-york-v4 · synced Aug 28, 2026
Installation
import { Avatar, AvatarImage, AvatarFallback } from "@aspyn-io/kit";With image and fallback
The fallback shows while the image loads or if it fails.
SQAS
Sizes and grouping
OMJL+3
With status indicator
AvatarBadge is positioned bottom-right with a ring cut out of the avatar: use a color to signal presence.
SQASJL
Avatar group with overflow
AvatarGroup overlaps members; AvatarGroupCount caps the list with a +N tally.
OMJLCC
+3
Notes
- Fallback initials derive from user display names: remember Aspyn API responses are snake_case (user.display_name).