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

AvatarGroupTooltip

Prop

Type

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.

Credits to Jhey for the inspiration.

Avatar Group

On this page