data-display/DSAvatarGroup
DSAvatarGroup
data-displayOverlapping stack of avatars with a '+N' overflow indicator when the list exceeds the max.
iOS 17+macOS 14+
Purpose
Display project collaborators, message participants, or event attendees in a compact format.
Interactive Reference
Live showroom
Need the full visual surface?
Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().
Best for exploring:
variants, states, categories, and real app examples in one place.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsreq | [(initials: String, tint: Color)] | — | Avatar data array. |
| size | DSAvatarSize | .sm | Size of each avatar. |
| max | Int | 3 | Maximum visible avatars before the overflow indicator. |
Examples
Project members
Team members on a project card.
swift
DSAvatarGroup(
items: members.map { ($0.initials, $0.color) },
size: .sm,
max: 4
)