║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Avatar Group description: An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-animate-avatar-group" />

Installation

<ComponentInstallation name="primitives-animate-avatar-group" />

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

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/animate/tooltip#tooltipprovider" text="Animate UI API Reference - TooltipProvider" />

<ExternalLink href="https://animate-ui.com/docs/primitives/animate/tooltip#tooltip" text="Animate UI API Reference - Tooltip" />

</div>

<TypeTable type={{ children: { description: 'The children of the AvatarGroup.', type: 'React.ReactElement[]', required: true, }, invertOverlap: { description: 'Whether to invert the overlap of the avatars.', type: 'boolean', required: false, default: 'false', }, translate: { description: 'The translation of the AvatarGroup.', type: 'string | number', required: false, default: '-30%', }, transition: { description: 'The transition of the AvatarGroup.', type: 'Transition', required: false, default: '{ type: "spring", stiffness: 300, damping: 17 }', }, tooltipTransition: { description: 'The transition of the AvatarGroupTooltip.', type: 'Transition', required: false, default: '{ type: "spring", stiffness: 300, damping: 35 }', }, openDelay: { description: 'The delay of the AvatarGroup tooltip.', type: 'number', required: false, default: '0', }, closeDelay: { description: 'The delay of the AvatarGroup tooltip.', type: 'number', required: false, default: '0', }, side: { description: 'The side of the AvatarGroup tooltip.', type: '"top" | "bottom" | "left" | "right"', required: false, default: 'top', }, sideOffset: { description: 'The offset of the AvatarGroup tooltip.', type: 'number', required: false, default: '25', }, align: { description: 'The alignment of the AvatarGroup tooltip.', type: '"start" | "center" | "end"', required: false, default: 'center', }, alignOffset: { description: 'The offset of the AvatarGroup tooltip.', type: 'number', required: false, default: '0', }, '...props': { description: 'The props of the AvatarGroup.', type: 'React.ComponentProps<"div">', required: false, }, }} />

AvatarGroupTooltip

<ExternalLink href="https://animate-ui.com/docs/primitives/animate/tooltip#tooltipcontent" text="Animate UI API Reference - TooltipContent" />

AvatarGroupTooltipArrow

<ExternalLink href="https://animate-ui.com/docs/primitives/animate/tooltip#tooltiparrow" text="Animate UI API Reference - TooltipArrow" />

Credits

• Credits to Jhey for the inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║