Back to Docs

Avatar Group / Stack

Overlapping user avatars with a numeric overflow indicator. Pure Tailwind — no JavaScript, no libraries.

Preview

1
2
3
4
+3

Usage

<div className="flex items-center -space-x-3">
  <div className="h-10 w-10 rounded-full
    border-2 border-[#0A0612]
    ring-2 ring-violet-500/30
    bg-gradient-to-br from-violet-500
    to-pink-400" />
  <div className="h-10 w-10 rounded-full
    border-2 border-[#0A0612]
    ring-2 ring-violet-500/30
    bg-gradient-to-br from-violet-500
    to-pink-400" />
  <div className="h-10 w-10 rounded-full
    border-2 border-[#0A0612]
    ring-2 ring-violet-500/30
    flex items-center justify-center
    text-xs font-semibold text-gray-300">
    +3
  </div>
</div>

Notes

  • •-space-x-3 controls overlap amount. Increase for tighter stacking.
  • •The border matches the page background to create the cut-out overlap effect.
  • •Replace gradient placeholder with <img> tags for real avatars.