C&C Docs
Log in

cnc-avatar-group

A compact collection of overlapping cnc-avatar widgets with shape-aware separation, reversible stacking, an optional overflow counter, and staggered entrance animation.

Quick start

Bind an array of avatar objects. Each item can provide a name, image, initials, or fallback icon. Use limit to collapse the rest into a terminal counter.

Mike
DR
+1 
<div x-data="{ members: [
  { name: 'Mike', image: '/people/mike.jpg' },
  { name: 'Doris', initials: 'DR' },
  { name: 'Peter', icon: 'heroicons/user' }
] }">
  <cnc-avatar-group
    :avatars="members"
    limit="2"
    size="lg"
    shape="circle"
  ></cnc-avatar-group>
</div>

Usage guidance

Use avatar groups for compact membership or collaboration summaries. Keep individual names available through each avatar object, use limit in constrained layouts, and avoid animation when the group updates frequently enough that repeated entrances would distract.

← Back to Widgets