Avatar Group

An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.

Open in

Installation

Usage

<AvatarGroup>
  {AVATARS.map((avatar, index) => (
    <Avatar key={index}>
      <AvatarImage src={avatar.src} />
      <AvatarFallback>{avatar.fallback}</AvatarFallback>
      <AvatarGroupTooltip>
        <AvatarGroupTooltipArrow />
        <p>{avatar.tooltip}</p>
      </AvatarGroupTooltip>
    </Avatar>
  ))}
</AvatarGroup>

API Reference

AvatarGroup

Animate UI API Reference - TooltipProvider Animate UI API Reference - Tooltip

Prop	Type	Default
`children`	`React.ReactElement[]`	-
`invertOverlap?`	`boolean`	`false`
`translate?`	`string \| number`	`-30%`
`transition?`	`Transition`	`{ type: "spring", stiffness: 300, damping: 17 }`
`tooltipTransition?`	`Transition`	`{ type: "spring", stiffness: 300, damping: 35 }`
`openDelay?`	`number`	`0`
`closeDelay?`	`number`	`0`
`side?`	`"top" \| "bottom" \| "left" \| "right"`	`top`
`sideOffset?`	`number`	`25`
`align?`	`"start" \| "center" \| "end"`	`center`
`alignOffset?`	`number`	`0`
`...props?`	`React.ComponentProps<"div">`	-