Avatar Group — React Component

Overlapping avatar stack with per-avatar entrance animations (flip, slide, scale, bounce), four hover styles, name tooltips, and automatic color-coded fallback initials when no image is supplied.

Motion Effectsspringhoveravatargroupuserssocial prooftooltipframer-motionspringoverlap

Avatar Group

Lift + Scale entrance

Bounce entrance + Rotate hover

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

size

Avatar diameter in px.

overlap

Pixel overlap between adjacent avatars.

showTooltips

Show name tooltip on hover.

hoverAnimation

Animation applied to the avatar under the cursor.

hoverScale

Scale multiplier applied on hover.

entranceAnimation

Entrance animation for each avatar on mount.

entranceStagger

Delay in seconds between each avatar's entrance.

Generated JSX

Copy this into your page.

<useState
  size={40}
  overlap={10}
  showTooltips={true}
  hoverAnimation="lift"
  hoverScale={1.1}
  entranceAnimation="scale"
  entranceStagger={0.05}
/>

Animation effects

springhover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Avatar Group

Avatar Group renders a horizontally overlapping stack of user avatars with per-avatar entrance animations and hover effects powered by Framer Motion. Each avatar supports a photo via `src`, with automatic color-coded initials fallback when no image is provided. Name tooltips with enter/exit animations appear on hover. Four entrance animation styles — flip, slide, scale, and bounce — stagger across the group on mount, and four hover styles — scale, lift, rotate, and up — make the hovered avatar stand out from the stack. Use it for social proof strips, team sections, collaborator counts, and anywhere a list of people needs to be communicated compactly.

Common use cases

Social proof strips on pricing and landing pages
Team member and collaborator count displays
Active user and community size indicators
Comment and reaction participant lists