Avatar Stack

Interactive

An overlapping avatar group: hovering or focusing an avatar lifts it and reveals a name tooltip while neighbours part slightly; extras collapse into a “+N” chip and images fall back to deterministic colored initials. Under reduced-motion the lift and parting are dropped; the tooltip still appears.

Inspired by Watermelon UI — avatar group — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/avatar-stack.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/avatar-stack.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<AvatarStack
    size={48}
    max={5}
    people={[
      { name: "Aria Chen" },
      { name: "Marcus Webb" },
      { name: "Ines Duarte" },
      { name: "Kofi Mensah" },
      { name: "Yuki Tanaka" },
      { name: "Lena Fischer" },
      { name: "Omar Haddad" },
    ]}
  />

Props

AvatarStackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick">

Prop	Type	Default	Description
people*	AvatarStackPerson[]	—	—
max	number	5	How many avatars to show before collapsing into a "+N" chip.
size	number	40	Avatar diameter in px.
onPersonClick	(person: AvatarStackPerson, index: number) => void	—	—