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",
},
{
name: "JD",
imgURL: "https://randomuser.me/api/portraits/men/75.jpg",
},
{
name: "AL",
imgURL:
"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80",
},
{
name: "MS",
imgURL: "https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg",
},
];
export default function AvatarGroup() {
return (
<div className="flex items-center justify-center -space-x-2">
{avatarData.map((item, idx) => (
<Avatar.Root
key={idx}
className="bg-white border-2 border-white h-10 w-10 flex items-center justify-center overflow-hidden rounded-full"
>
<Avatar.Image
src={item.imgURL}
alt={`${item.name} avatar`}
className="w-full h-full object-cover"
/>
<Avatar.Fallback
delayMs={600}
className="text-sm font-medium text-gray-600"
>
{item.name}
</Avatar.Fallback>
</Avatar.Root>
))}
</div>
);
}