# Avatar Group

> A token-driven Shared-with facepile of overlapping member avatars with real photos, a plus-N overflow chip, clean ring stacking with the leading avatar on top, a live design-system switcher, and add and remove controls.

- Category: Avatar
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Atlas
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: stack
- Page: https://builder.atheros.ai/components/avatar-group
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_avatar_group/preview-1c20973f366e.webp

## Features

- Stacked, overlapping member avatars rendered from a JS roster with real photos
- Leading avatar painted on top so each ring tucks neatly under the previous one
- Plus-N overflow chip that summarizes members beyond the visible cap
- Hover and focus lift each avatar forward and reveal the member name in an opaque tooltip bubble
- An `aria-live` caption that reflects the access count or the hovered person
- Live add and remove controls that update the group and overflow count in real time
- A design-system switcher that retones the whole component across 39 brand themes at runtime
- Bare layout with no surrounding panel — the facepile sits directly on the page
- Photos fall back to computed initials if an image fails to load
- Fully respects `prefers-reduced-motion`

## Accessibility

- **List semantics** — The stack uses `role="list"` and each member `role="listitem"`
- **Member labels** — Each avatar carries an `aria-label` with the member name and role
- **Image alternative** — Each photo uses a descriptive `alt`
- **Live caption** — The caption is an `aria-live="polite"` region announcing the count or hovered person
- **Design switcher** — The design-system `<select>` carries an `aria-label`; its icons are decorative
- **Keyboard activation** — Controls are native buttons activated by Enter and Space
- **Focus indicators** — `:focus-visible` with `--ring` outline on avatars and controls
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Enter` — Activate the focused control
- `Space` — Activate the focused control
- `Tab` — Move focus across avatars and controls

## Common questions

**Which frameworks is Avatar Group available in?**

Avatar Group ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Avatar Group free?**

Avatar Group is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Avatar Group support dark mode?**

Yes. Avatar Group ships light and dark themes, both drawn from the Atlas design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Avatar Group live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/avatar-group

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt