Avatar Group

stack x overlap

Stacked avatar group with overlap and +N overflow. From Bundui.

avatargroupstackbundui

Code

avatar-group.tsx

export function AvatarGroup({ people, overflow = 0 }: { people: { initials: string; color: string }[]; overflow?: number }) {
  return (
    <div className="flex -space-x-3">
      {people.map((p) => (
        <div key={p.initials}
          className="flex size-10 items-center justify-center rounded-full border-2 border-background text-xs font-medium text-white"
          style={{ background: p.color }}>
          {p.initials}
        </div>
      ))}
      {overflow > 0 && (
        <div className="z-10 flex size-10 items-center justify-center rounded-full border-2 border-background bg-surface text-xs text-muted-foreground">
          +{overflow}
        </div>
      )}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Avatar Group component and wire it to my accent.”