Avatar Group
Overlapping interactive avatar cluster with hover elevation, name cards, and excess counter badge.
ReactTailwind CSSFramer Motion
Dependenciesframer-motion
npm install framer-motionPreview
+1
Hover avatar to view profile card
Source Code
avatar-group.tsxtsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
export interface UserAvatar {
id: string;
name: string;
role: string;
src?: string;
initials: string;
}
export function AvatarGroup({ max = 4 }: { max?: number }) {
const [hoveredId, setHoveredId] = useState<string | null>(null);
return (
<div className="flex items-center -space-x-3 p-2">
{/* Avatars */}
</div>
);
}Usage
usage.tsxtsx
1
2
3
4
5
6
7
<AvatarGroup
avatars={[
{ id: "1", name: "Sarah Chen", role: "Staff Engineer", initials: "SC" },
{ id: "2", name: "Marcus Vance", role: "Design Lead", initials: "MV" },
]}
max={3}
/>Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| avatars | UserAvatar[] | Optional | defaultAvatars | Array of user avatars with name, role, and avatar url. |
| max | number | Optional | 4 | Maximum avatars displayed before showing the counter badge. |
Types
types.tstsx
1
2
3
4
5
6
7
export interface UserAvatar {
id: string;
name: string;
role: string;
src?: string;
initials: string;
}