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>{avatar.tooltip}</AvatarGroupTooltip>
    </Avatar>
  ))}
</AvatarGroup>

API Reference

AvatarGroup

Animate UI API Reference - AvatarGroup Primitive Animate UI API Reference - TooltipProvider Animate UI API Reference - Tooltip

Prop	Type	Default
`children`	`React.ReactElement[]`	-
`invertOverlap?`	`boolean`	`true`
`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">`	-

AvatarGroupTooltip

Animate UI API Reference - AvatarGroupTooltip Primitive Animate UI API Reference - TooltipContent

Prop	Type	Default
`children`	`React.ReactNode`	-
`layout?`	`boolean \| "position" \| "size" \| "preserve-aspect"`	`preserve-aspect`

Credits

Credits to Jhey for the inspiration.

Avatar Group

Installation

Usage

API Reference

AvatarGroup

AvatarGroupTooltip

Credits

On this page