All components
Avatar Group Add
Data DisplayOverlapping avatars with a + button that pops new ones in.
NKALGH+2
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/avatar-group-add.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/avatar-group-add.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| avatars | string[] | - | Initial members' initials. |
| extra | number | 0 | Count shown in the trailing +N chip. |
Accessibility
- The add button has an aria-label rather than relying on the icon alone.
- Initials are real text, so they scale with the user's type size.
- AnimatePresence keeps enter and exit transitions from stacking on rapid clicks.
Dependencies
motionclsxtailwind-mergelucide-react