Avatar group ported

A stack that says who is here.

Show a team or set of contributors in a small space, with an overflow count.

Live specimen

Loading demo…

Guidance

When to use

Showing who owns or edits something in a header, card, or table cell.
Collaborator stacks where people join and leave while the page is open.
Long member lists that should collapse into a +N chip.

When not to use

For a single person — use Avatar.
When every name and role must be visible — use a list or a data table.

Installation

pnpm add sveltearc

Usage

<script lang="ts">
  import { AvatarGroup } from '$lib/components/avatar-group';

  const team = [
    { name: 'Ada Lovelace', status: 'online' },
    { name: 'Grace Hopper' },
    { name: 'Alan Turing' }
  ];
</script>

<AvatarGroup members={team} max={3} label="Editors" />

API Reference

Prop	Type	Default	Description
`members`	`AvatarGroupMember[]`	—	The people to show, in order.
`max`	`number`	4	How many to show before the +N chip.
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Avatar diameter.
`label`	`string`	'Team members'	Accessible group label; also names the overflow chip.

Accessibility

The stack is role="group" with the given label.
The overflow chip is role="img" labelled "N more <label>".
Hover names are decorative (aria-hidden); the accessible name comes from each Avatar.

Motion

Phase 1 still-state: the stack renders statically. Phase 2 wires the slot open/close spring and the overflow count roll. The hover fan, lift, and name tip are pure CSS and already work; reduced motion keeps the stack still while the ring and name still answer the pointer.

Notes for AI

`members` is ordered; `max` controls where the +N chip starts.
It depends on the Avatar component.
Do not restyle the overlap; it is driven by --index / --count in the CSS module.

Source of truth: registry/components/avatar-group/avatar-group.tsx