Avatar
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Demo
Next.js Copy
<Image
src={...}
width={50}
h={50}
className="transition-all rounded-full"
/>
<Image
src={...}
width={50}
h={50}
className="transition-all rounded-full p-0.5 outline outline-green-500"
/>
<div className="relative">
<div className="w-[16px] h-[16px] bg-green-500 rounded-full absolute top-0 right-0 flex items-center justify-center"></div>
<Image
src={...}
width={50}
h={50}
className="transition-all rounded-full"
/>
</div>