Avatar Circles
Stacked initials avatars with a +N badge — zero images.
- 0.7 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Maya ChenTom OkaforSofia LindqvistDan Romeroand 2,400 more
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/avatar-circles.jsonAdds components/velora/avatar-circles.tsx.
Props
| Prop | Type | Default |
|---|---|---|
people*Names rendered as initials | string[] | — |
extra"+N" badge count | number | — |
Also accepts every <div> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- Static; no animation.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Each avatar is read by its full name, with the initials hidden, and the badge is read as "and 2,400 more" (the exact extra count).