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";
function AvatarWithInfo({
src,
alt,
name,
email,
}: {
src: string;
alt: string;
name: string;
email: string;
}) {
return (
<div className="flex items-center space-x-3">
<Avatar.Root className="w-10 h-10 rounded-full overflow-hidden">
<Avatar.Image
src={src}
alt={alt}
className="w-full h-full object-cover"
/>
<Avatar.Fallback
delayMs={600}
className="w-full h-full bg-gray-50 flex items-center justify-center text-xs font-medium text-gray-500"
>
{name
.split(" ")
.map((n) => n[0])
.slice(0, 2)
.join("")
.toUpperCase()}
</Avatar.Fallback>
</Avatar.Root>
<div>
<span className="block text-gray-700 text-sm font-medium">{name}</span>
<span className="block text-gray-500 text-xs">{email}</span>
</div>
</div>
);
}
export default function AvatarsList() {
return (
<div className="flex items-center justify-center gap-10">
<AvatarWithInfo
src="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"
alt="Jane Smith"
name="Jane Smith"
email="janesmith@example.com"
/>
<AvatarWithInfo
src="https://randomuser.me/api/portraits/women/79.jpg"
alt="Nikita Andrew"
name="Nikita Andrew"
email="nikitaandrew@example.com"
/>
</div>
);
}