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.
SK
CN
AW
GR
JH
Installation
Examples
Bottom translation
SK
CN
AW
GR
JH
Props
AvatarGroup
| Prop | Type | Default |
|---|---|---|
children | React.ReactElement[] | - |
className? | string | - |
transition? | Transition | { type: 'spring', stiffness: 300, damping: 17 } |
invertOverlap? | boolean | - |
translate? | string | number | -30% |
tooltipProps? | TooltipProps | { side: 'top', sideOffset: 20 } |
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.
SKCNAWGRJH
Installation
Examples
Bottom translation
SKCNAWGRJH
Props
AvatarGroup
| Prop | Type | Default |
|---|---|---|
children | React.ReactElement[] | - |
className? | string | - |
invertOverlap? | boolean | - |
size? | string | number | 43px |
border? | string | number | 3px |
columnSize? | string | number | 37px |
align? | "start" | "center" | "end" | end |
translate? | number | -30% |
tooltipProps? | TooltipProps | { side: 'top', sideOffset: 20 } |
AvatarGroupTooltip
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | - |
Credits
- Credits to Jhey for the inspiration.