AvatarGroup

'use client'
import { useState } from 'react'

const USERS = [
  { name: 'Alice', emoji: '👩', color: '#6d28d9' },
  { name: 'Bob', emoji: '👨', color: '#2563eb' },
  { name: 'Carol', emoji: '👩‍🦰', color: '#db2777' },
  { name: 'David', emoji: '🧑', color: '#0891b2' },
  { name: 'Eve', emoji: '👩‍🦳', color: '#059669' },
]

export default function AvatarGroup({ users = USERS, max = 4, size = 40 }) {
  const [hovered, setHovered] = useState(null)
  const visible = users.slice(0, max)
  const rest = users.length - max
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {visible.map((u, i) => (
        <div
          key={u.name}
          onMouseEnter={() => setHovered(u.name)}
          onMouseLeave={() => setHovered(null)}
          title={u.name}
          style={{
            width: size, height: size, borderRadius: '50%',
            background: u.color, display: 'flex', alignItems: 'center',
            justifyContent: 'center', fontSize: size * 0.45,
            border: '3px solid #fff', marginLeft: i === 0 ? 0 : -size * 0.35,
            position: 'relative', zIndex: visible.length - i,
            cursor: 'pointer', transition: 'transform 0.2s',
            transform: hovered === u.name ? 'translateY(-4px)' : 'none',
          }}
        >{u.emoji}</div>
      ))}
      {rest > 0 && (
        <div style={{
          width: size, height: size, borderRadius: '50%',
          background: '#f1f5f9', border: '3px solid #fff',
          marginLeft: -size * 0.35, display: 'flex',
          alignItems: 'center', justifyContent: 'center',
          fontSize: size * 0.32, fontWeight: 700, color: '#64748b',
        }}>+{rest}</div>
      )}
    </div>
  )
}

Component info

About

Stacked avatar group with overflow count and tooltip