Avatar Group with Overflow Count

Overlapping avatar stack showing up to 5 avatars, then a +N overflow badge, with a popover listing all members.

Media & Images media-images interactive shadcn social simple

Prompt

Create an avatar group component with:
- Up to 5 circular avatars in an overlapping stack
- When more than 5: the 5th slot shows "+N" (e.g. "+8")
- Each avatar has a tooltip on hover showing the name
- Click the group: opens a popover listing ALL members with avatar + name + role
- Size variants: sm, md, lg
- Add member button with a "+" icon at the end
- Use shadcn/ui Popover, Avatar, Tailwind CSS

Share:Share on X