AvatarGroup Component
React avatar group with overlapping stack, background rings and an automatic +N overflow counter — built with Tailwind CSS.
Import
javascript
1import { AvatarGroup, Avatar } from "@neuctra/ui";Basic Usage
Wrap any avatars; max collapses the rest into a +N counter.
Spacing
Props
All available props for the AvatarGroup component.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Avatar elements (required) |
| max | number | — | Visible limit; the rest becomes “+N” |
| size | "sm" | "md" | "lg" | "md" | Size of the overflow counter (match your avatars) |
| spacing | "tight" | "normal" | "normal" | Overlap amount |
| itemClassName | string | — | Styles the wrapper span around each visible avatar item. |
| counterClassName | string | — | Styles the "+N" overflow counter. |
Accessibility
- Each avatar keeps its own alt text; the overflow counter is labelled “N more”.
- Rings use the background token, so the stack works in both themes.
Frequently Asked Questions
How do I install and import the AvatarGroup component?
Install the @neuctra/ui package, then import it with: import { AvatarGroup } from "@neuctra/ui";
What variants and sizes does AvatarGroup support?
AvatarGroup supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the AvatarGroup component accessible?
AvatarGroup is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.