Avatar Group

Component

About

Avatar group with hover motion animation

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar Group to your project and fits it to your theme.

Code

How Avatar Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}