‹ components

AvatarGroup

stablev1.0.0·open in canvas

Overlapping row of Avatars with a `+N` overflow disc — "who's here" at a glance.

Installnpx shadcn add @cids/avatar-group
Live demo
MKN

Motion · tap to replay

honors reduced-motion

None — inherits Avatar's static nature.

This component declares no motion.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { AvatarGroup } from "@/design-system";

<AvatarGroup
  members={watchers.map((w) => ({ name: w.handle, seed: w.wallet }))}
  max={3}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

Overlapping row of Avatars with a +N overflow disc — "who's here" at a glance.

Anatomy

 ◐◐◐ +38          ← up to `max` avatars, then a +N disc
 └┬┘ └┬┘
  │   └ surface-bright disc, fg-muted, "+N"
  └ Avatars, -8px overlap, 2px surface-container ring

Props

PropTypeDefaultNotes
membersAvatarGroupMember[]—{ name, seed?, hue?, you? }. Render order is the caller's concern — spec wants followed-by-you first.
maxnumber3Avatars shown before collapsing to +N.
size"xs" "sm"`"xs"Avatar diameter (xs 20 · sm 28 px).
classNamestring—Merged via cn.

Motion

None — inherits Avatar's static nature.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.