An overlapping stack of avatars where hovering one lifts it and its neighbors with a smooth distance-based falloff, for showing team members or collaborators compactly.
import { AvatarGroup } from "@/components/ui/motion-avatar-group";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export default function AvatarGroupDemo() {
const users = [
{ name: "Alice", src: "https://cdn.21st.dev/assets/mirror/46/46d532f33f5ae429e577733a5504e39f8aeed3c6c7913f58afe19a0a7c59c7cd.jpg" },
{ name: "Bob", src: "https://cdn.21st.dev/assets/mirror/07/07b0c78f5d884bc535400f819853eccd98327eb29c97f90c23d2f44befacd428.jpg" },
{ name: "Carol", src: "https://cdn.21st.dev/assets/mirror/5e/5eccb6dd8c3d7b1be1f230adc596fd606bee6aeefe19f3a614003426f18556bc.jpg" },
{ name: "Dave", src: "https://cdn.21st.dev/assets/mirror/b5/b593935ecc8730c1c7b610622a4af75df53b3eb29b61ecb4aaabf0a859e62d89.jpg" },
{ name: "Eve", src: "https://cdn.21st.dev/assets/mirror/7c/7c61df640bc5483de124880db4e479452092863f02204ee97a852d454bef1ca9.jpg" },
];
return (
<div className="flex items-center justify-center w-full h-screen bg-background">
<AvatarGroup>
{users.map((user) => (
<Avatar
key={user.name}
className="border-2 border-background w-10 h-10"
>
<AvatarImage src={user.src} alt={user.name} />
<AvatarFallback>{user.name[0]}</AvatarFallback>
</Avatar>
))}
</AvatarGroup>
</div>
);
}