components / avatar-stack
avatar-stack.
overlapping square tiles for "who else is here" — initials when there's no image, a name pill on hover, and an overflow counter as the last tile rather than a line of text. pass total when people is a fetched slice and it counts the ones you never loaded. pfp is the single 3d-tilt portrait; this is the crowd.
ALMAJHPR+3
+2
ALMAJH+125
hover a face for its name; the last stack knows there are 128 in the room.
ALMAJHPR+3
listening nowinstallation
bunx @justin06lee/chrome@latest add avatar-stackprops
| name | type | default | description |
|---|---|---|---|
| people * | Person[] | - | { id, name, src?, href? }[] |
| max | number | 5 | how many tiles before the overflow counter. |
| total | number | - | true headcount when people is only a slice. |
| size | 'xs' | 'sm' | 'md' | 'sm' | |
| tooltip | boolean | true | name pill on hover and keyboard focus. |
| onSelect | (person: Person) => void | - | |
| linkComponent | React.ElementType | - | anchor component for internal hrefs (e.g. next/link). |
| ariaLabel | string | - | screen-reader summary. defaults to 'N people'. |
| className | string | - |