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";
export default function Avatars() {
return (
<div className="flex items-center justify-center gap-x-10">
{/* Avatar 1 with profile info */}
<div className="flex items-center gap-3">
<Avatar.Root className="w-12 h-12 rounded-full overflow-hidden">
<Avatar.Image
src="https://randomuser.me/api/portraits/women/79.jpg"
alt="Nikita Andrew"
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-sm"
>
CT
</Avatar.Fallback>
</Avatar.Root>
<div>
<span className="text-gray-700 text-sm font-medium">
Nikita Andrew
</span>
<a
href="#"
className="block text-indigo-600 hover:text-indigo-500 text-xs"
>
View profile
</a>
</div>
</div>
{/* Avatar 2 with chevron button */}
<button className="flex items-center gap-3">
<Avatar.Root className="w-12 h-12 rounded-full overflow-hidden">
<Avatar.Image
src="https://randomuser.me/api/portraits/women/79.jpg"
alt="User"
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-sm"
>
CT
</Avatar.Fallback>
</Avatar.Root>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="w-5 h-5 text-gray-400"
>
<path
fillRule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clipRule="evenodd"
/>
</svg>
</button>
</div>
);
}