Avatar Group

Overlapping avatars where the hovered one rises, with a tooltip that glides from avatar to avatar.

"use client"

import {
  AvatarGroup,
  AvatarGroupTooltip,
  AvatarGroupTooltipArrow,
} from "@animate-ui/react/primitives/avatar-group"
import { cn } from "cn"
import { motion } from "motion/react"

const PEOPLE = [
  { name: "Skyleen", initials: "SK", className: "bg-rose-500" },
  { name: "Shadcn", initials: "CN", className: "bg-amber-500" },
  { name: "Adam Wathan", initials: "AW", className: "bg-emerald-500" },
  { name: "Guillermo Rauch", initials: "GR", className: "bg-sky-500" },
  { name: "Jhey", initials: "JH", className: "bg-violet-500" },
  { name: "David Haz", initials: "DH", className: "bg-fuchsia-500" },
]

export default function AvatarGroupDemo() {
  return (
    <AvatarGroup className="h-12 -space-x-3" invertOverlap>
      {PEOPLE.map((person) => (
        <div
          key={person.name}
          role="img"
          aria-label={person.name}
          tabIndex={0}
          className={cn(
            "flex size-12 items-center justify-center rounded-full border-3 border-background text-sm font-medium text-white outline-none select-none focus-visible:ring-2 focus-visible:ring-ring",
            person.className
          )}
        >
          {person.initials}
          <AvatarGroupTooltip className="rounded-md bg-foreground px-3 py-1.5 text-xs text-background">
            <AvatarGroupTooltipArrow className="size-2.5 fill-foreground" />
            <motion.p layout="preserve-aspect" className="whitespace-nowrap">
              {person.name}
            </motion.p>
          </AvatarGroupTooltip>
        </div>
      ))}
    </AvatarGroup>
  )
}

Installation

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

The tooltips are Animate UI's Tooltip, positioned with Floating UI, a peer dependency of this primitive:

npm install @floating-ui/react

pnpm add @floating-ui/react

yarn add @floating-ui/react

bun add @floating-ui/react

Usage

import {
  AvatarGroup,
  AvatarGroupTooltip,
  AvatarGroupTooltipArrow,
} from '@animate-ui/react/primitives/avatar-group';

export function Team({ people }: { people: { name: string; src: string }[] }) {
  return (
    <AvatarGroup className="h-12 -space-x-3" invertOverlap>
      {people.map((person) => (
        <img
          key={person.name}
          src={person.src}
          alt={person.name}
          className="size-12 rounded-full border-3 border-background"
        />
      ))}
    </AvatarGroup>
  );
}

Each child is an avatar. Put an AvatarGroupTooltip inside an avatar to give it a tooltip:

<div className="size-12 rounded-full border-3 border-background bg-muted">
  SK
  <AvatarGroupTooltip className="rounded-md bg-foreground px-3 py-1.5 text-xs text-background">
    <AvatarGroupTooltipArrow className="size-2.5 fill-foreground" />
    <p>Skyleen</p>
  </AvatarGroupTooltip>
</div>

Animation

The hovered (or pressed) avatar rises by translate on a bouncy spring (stiffness 300, damping 17): it overshoots by about 17% before it settles, and dips below its place the same way when it comes back down.
The tooltips share one popup (Tooltip): it opens at once (openDelay is 0) and glides from avatar to avatar on its spring (stiffness 400, damping 29), a little past the next avatar before it settles.
<AnimateUIProvider tempo> paces the default springs.
Under reduced motion, the avatar rises at once and the tooltip only fades.

API Reference

AvatarGroup

Takes the TooltipProvider and Tooltip props, with other defaults.

Prop	Type	Default
`children`	`React.ReactElement \| React.ReactElement[]`	-
`invertOverlap?`	`boolean`	`false`
`translate?`	`string \| number`	`'-30%'`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 300, damping: 17 }`
`tooltipTransition?`	`Transition`	`{ type: 'spring', stiffness: 400, damping: 29 }`
`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'>`	-