Avatar stack
Also called avatar group, facepile, or stacked avatars
A row of overlapping profile pictures that shows who is on a project or in a document, with a +3 counter for everyone who doesn’t fit.
import { Avatar } from '@base-ui/react/avatar';
import { Tooltip } from '@base-ui/react/tooltip';
type Member = { id: number; name: string; photo?: string };
const MAX_FACES = 4;
const COLORS = ['bg-blue-500', 'bg-emerald-500', 'bg-amber-500', 'bg-rose-500'];
const initials = (name: string) => name.match(/\b\w/g)?.join('').slice(0, 2);
export function AvatarStack({ members }: { members: Member[] }) {
const faces = members.slice(0, MAX_FACES);
const extra = members.length - faces.length;
return (
<Tooltip.Provider delay={200}>
{/* Overlap by 8px, then spread 4px apart on hover with a slight overshoot. */}
<div className='flex -space-x-2 hover:space-x-1 *:transition-[margin] *:duration-300 *:ease-[cubic-bezier(0.34,1.56,0.64,1)]'>
{faces.map((member) => (
<Tooltip.Root key={member.id}>
<Tooltip.Trigger
aria-label={member.name}
className='rounded-full ring-2 ring-background outline-none focus-visible:ring-ring'
>
{/* Base UI shows the fallback until the photo loads, or if it fails. */}
<Avatar.Root
className={`flex size-8 items-center justify-center overflow-hidden rounded-full text-xs font-medium text-white ${COLORS[member.id % COLORS.length]}`}
>
<Avatar.Image
src={member.photo}
alt=''
className='size-full object-cover'
/>
<Avatar.Fallback>{initials(member.name)}</Avatar.Fallback>
</Avatar.Root>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Positioner sideOffset={6}>
<Tooltip.Popup className='rounded-md bg-foreground px-2 py-1 text-xs text-background transition-opacity duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0'>
{member.name}
</Tooltip.Popup>
</Tooltip.Positioner>
</Tooltip.Portal>
</Tooltip.Root>
))}
{extra > 0 && (
<span className='flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium ring-2 ring-background'>
+{extra}
<span className='sr-only'> more people</span>
</span>
)}
</div>
</Tooltip.Provider>
);
}Show the project members as an avatar stack in the header: up to 4 round 32px avatars overlapping by 8px, each with a 2px ring in the page background color, then a +N counter for the rest. People without photos get initials on a color picked from their user ID. On hover, spread the avatars 4px apart with a spring and show each person’s name in a small tooltip.
Paste into Layerwise or any AI coding tool.
What is Avatar stack?
An avatar stack overlaps small round profile pictures, each with a thin ring in the background color so the edges stay crisp. When there are more people than room, the last spot becomes a counter such as “+3”. People without a photo get their initials on a colored circle.
Use it to show presence or membership at a glance: who is editing a document right now, who is assigned to a task, who is in a channel. Hovering the stack can fan the avatars apart so each face is easier to see, and each avatar can show the person’s name in a tooltip.
Show three to five faces at most. Give every avatar an accessible name, such as the person’s full name as alt text, and make the counter say something useful to screen readers, like “3 more people”.
Related terms
All termsBadge
A small rounded label that marks a status or a count, like New, Beta, Failed, or the red number on an inbox icon.
Tooltip
A small label that appears next to an element when you hover over it or focus it, naming an icon button or adding a short hint.
Hover effect
A visual change, such as a lift, glow, or zoom, that happens when the mouse pointer moves over an element to show it can be clicked.
Spring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.