Tailwind CSS Avatar Group (Facepile)
Group avatars in stacked or grid layouts with Tailwind CSS facepile examples, including borders, tooltips, and dropdown overflow.
Grid layout
Arrange avatars in a grid when you want equal spacing and room for overflow counts.
Custom border color
Change the ring color around each avatar to keep stacked groups distinct on different backgrounds.
Avatar group with tooltips
Requires JS
This page requires our Tooltip plugin. You can skip this step if you're already using Preline UI as a package.
Reveal each member's name on hover or focus without taking extra inline space.
Avatar group with dropdown
Requires JS
This page requires our Dropdown plugin. You can skip this step if you're already using Preline UI as a package.
Collapse extra members into a dropdown trigger when the full group would take up too much space.