Avatar Group

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

AvatarGroup

An animated avatar group built with TailwindCSS and Motion, where avatars gently shift forward on hover to highlight each user. For a CSS-only version with a mask effect that blends seamlessly into any background, check out the AvatarGroupMask component.

Open in

Installation

Usage

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

Examples

Bottom translation

Open in

Props

AvatarGroup

Prop	Type	Default
`tooltipProps?`	`TooltipProps`	`{ side: 'top', sideOffset: 20 }`
`translate?`	`string \| number`	`-30%`
`invertOverlap?`	`boolean`	-
`transition?`	`Transition`	`{ type: 'spring', stiffness: 300, damping: 17 }`
`className?`	`string`	-
`children`	`React.ReactElement[]`	-

AvatarGroupTooltip

Prop	Type	Default
`children`	`React.ReactNode`	-

AvatarGroupMask

A sleek, CSS-only avatar group using TailwindCSS for the translate animation and a mask effect. Perfect for layered or custom backgrounds — inspired by Jhey's awesome work.

You need TailwindCSS 4.1 or higher to use this component.

Open in

SKCNAWGRJH

Installation

Usage

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

Examples

Bottom translation

Open in

SKCNAWGRJH

Note: Children's avatars must have a data-slot="avatar" attribute.

Props

AvatarGroup

Prop	Type	Default
`tooltipProps?`	`TooltipProps`	`{ side: 'top', sideOffset: 20 }`
`translate?`	`number`	`-30%`
`align?`	`"start" \| "center" \| "end"`	`end`
`columnSize?`	`string \| number`	`37px`
`border?`	`string \| number`	`3px`
`size?`	`string \| number`	`43px`
`invertOverlap?`	`boolean`	-
`className?`	`string`	-
`children`	`React.ReactElement[]`	-

AvatarGroupTooltip

Prop	Type	Default
`children`	`React.ReactNode`	-

Credits

Credits to Jhey for the inspiration.

Avatar Group

On this page