Components
Loading preview...
Here is Avatars component
npx shadcn@latest add https://21st.dev/r/float_ui/avatars"use client";
import * as Avatar from "@radix-ui/react-avatar";
const avatarData = [
{
name: "CT",
imgURL: "https://randomuser.me/api/portraits/women/79.jpg",
size: "w-6 h-6",
dot: "w-1.5 h-1.5",
},
{
name: "CT",
imgURL: "https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg",
size: "w-8 h-8",
dot: "w-2 h-2",
},
{
name: "CT",
imgURL:
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f",
size: "w-10 h-10",
dot: "w-2.5 h-2.5",
},
{
name: "CT",
imgURL: "https://randomuser.me/api/portraits/men/86.jpg",
size: "w-12 h-12",
dot: "w-3 h-3",
},
{
name: "CT",
imgURL:
"https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e",
size: "w-14 h-14",
dot: "w-4 h-4",
},
];
export default function AvatarList() {
return (
<div className="flex items-center justify-center gap-x-10">
{avatarData.map((item, idx) => (
<Avatar.Root
key={idx}
className={`relative ${item.size}`}
>
<Avatar.Image
src={item.imgURL}
alt={`${item.name} avatar`}
className="w-full h-full rounded-full object-cover"
/>
<Avatar.Fallback
delayMs={600}
className="w-full h-full rounded-full bg-gray-50 flex items-center justify-center text-xs sm:text-sm"
>
{item.name}
</Avatar.Fallback>
<span
className={`absolute -bottom-0.5 right-1 rounded-full border border-white bg-green-500 ${item.dot}`}
></span>
</Avatar.Root>
))}
</div>
);
}