Components
Loading preview...
An avatar group component made with framer-motion and Tailwind CSS
@chetanverma16
npx shadcn@latest add https://21st.dev/r/chetanverma16/avatar-groupimport AvatarGroup from "@/components/ui/avatar-group";
export default function DemoOne() {
return (<AvatarGroup
items={[
{
id: 1,
name: "John Doe",
designation: "Software Engineer",
image: "https://randomuser.me/api/portraits/men/60.jpg",
},
{
id: 2,
name: "Jane Smith",
designation: "Product Manager",
image: "https://randomuser.me/api/portraits/men/61.jpg",
},
{
id: 3,
name: "Jim Beam",
designation: "Marketing Manager",
image: "https://randomuser.me/api/portraits/men/62.jpg",
},
{
id: 4,
name: "John Doe",
designation: "Software Engineer",
image: "https://randomuser.me/api/portraits/men/63.jpg",
},
{
id: 5,
name: "John Doe",
designation: "Software Engineer",
image: "https://randomuser.me/api/portraits/men/64.jpg",
},
{
id: 6,
name: "John Doe",
designation: "Software Engineer",
image: "https://randomuser.me/api/portraits/men/65.jpg",
},
]}
maxVisible={5}
size="md"
/>)
}