Avatar Group

Cards 505

About

An avatar group component made with framer-motion and Tailwind CSS

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/avatar-group";

export default function DemoOne() {
  return (<AvatarGroup
          items={[
            {
              id: 1,
              name: "John Doe",
              designation: "Software Engineer",
              image: "https://cdn.21st.dev/assets/mirror/82/82a53ec7286641124351dde4b145df2cc2a4799707467d290d73dbbab56d122a.jpg",
            },
            {
              id: 2,
              name: "Jane Smith",
              designation: "Product Manager",
              image: "https://cdn.21st.dev/assets/mirror/b5/b58616f0d669595c9a42d60a0b9803364c9859f1c3db93a5e3dc408b603e03e8.jpg",
            },
            {
              id: 3,
              name: "Jim Beam",
              designation: "Marketing Manager",
              image: "https://cdn.21st.dev/assets/mirror/18/1826ce29b169f340874dab804f578b98adfabd7d974d9970e8f8e08d050e1397.jpg",
            },
            {
              id: 4,
              name: "John Doe",
              designation: "Software Engineer",
              image: "https://cdn.21st.dev/assets/mirror/75/758f16c13fb08def95f73a9dec54ebde8e1d32b196c864e383b1ad22bcc85420.jpg",
            },
            {
              id: 5,
              name: "John Doe",
              designation: "Software Engineer",
              image: "https://cdn.21st.dev/assets/mirror/8d/8d9a61a581c43fe2088f221b7692c95db4b3ad5c0da0c856400c0e5acdcdcea8.jpg",
            },
            {
              id: 6,
              name: "John Doe",
              designation: "Software Engineer",
              image: "https://cdn.21st.dev/assets/mirror/ba/ba37ba21b03d91a2693745e751834250b404a7c2c6e06e33ae7cb38c0f687a4d.jpg",
            },
          ]}
          maxVisible={5}
          size="md"
        />)
}