Docs
Avatar List
A component that displays list of user's avatar
Installation
Update tailwind.config.js
theme: {
extend: {
keyframes: {
"bg-position": {
"0%": { backgroundPosition: "0% 50%" },
"100%": { backgroundPosition: "100% 50%" },
}
}
},
},
Run the following command
It will create a new file called avatar-list.tsx
inside the components/animata/list
directory.
mkdir -p components/animata/list && touch components/animata/list/avatar-list.tsx
Paste the code
Open the newly created file and paste the following code:
import { cn } from "@/lib/utils";
const data = [
{
name: "John Doe",
position: "Software Engineer",
image:
"https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Jane Smith",
position: "Product Manager",
image:
"https://images.unsplash.com/photo-1582610285985-a42d9193f2fd?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "David Johnson",
position: "UX Designer",
image:
"https://images.unsplash.com/photo-1530268729831-4b0b9e170218?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Emily Davis",
position: "Frontend Developer",
image:
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Michael Wilson",
position: "Backend Developer",
image:
"https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Sarah Thompson",
position: "Data Scientist",
image:
"https://images.unsplash.com/photo-1573496799515-eebbb63814f2?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
];
export default function AvatarList({
size = "md",
className,
}: {
size?: "sm" | "md" | "lg";
className?: string;
}) {
const sizes: Record<"sm" | "md" | "lg", string> = {
lg: "m-3 size-6",
md: "m-2 size-12",
sm: "m-1 size-8",
};
return (
<div className={cn("flex py-12", className)}>
{data.map((item) => (
<div
key={item.name}
className="group relative z-0 -ml-4 flex scale-100 items-center transition-all duration-200 ease-in-out hover:z-10 hover:scale-110"
>
<div className="relative overflow-hidden rounded-full bg-white">
<div className="bg-size pointer-events-none absolute h-full w-full animate-bg-position from-violet-500 from-30% via-cyan-400 via-50% to-pink-500 to-80% bg-[length:300%_auto] opacity-15 group-hover:bg-gradient-to-r" />
<div className="z-1 blur-lg" />
<img
src={item.image}
alt={item.name}
className={cn("rounded-full object-cover", sizes[size] ?? sizes.md)}
/>
</div>
<div className="absolute bottom-full left-1/2 -translate-x-1/2 translate-y-2 transform whitespace-nowrap rounded bg-slate-900 p-2 text-white opacity-0 transition-all duration-300 ease-in-out group-hover:-translate-y-2 group-hover:opacity-100 dark:bg-slate-100 dark:text-slate-900">
<div className="text-sm font-semibold">{item.name}</div>
<div className="text-sm">{item.position}</div>
</div>
</div>
))}
</div>
);
}
Credits
Built by sudha