An avatar group component made with framer-motion and Tailwind CSS
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"
/>)
}
Part of chetanverma/ui — browse the full library on 21st.dev.