Ngorei NexaUI

<Avatar 
 src="https://picsum.photos/id/64/48"
 size="xs" 
/>

<div class="nx-avatar nx-avatar-md nx-avatar-initial">
  JD
</div>

<Avatar 
    src="https://picsum.photos/id/64/48" 
    alt="Online User" 
    size="md" 
    status="online" 
/>

<Avatar 
    src="https://picsum.photos/id/1027/48" 
    alt="Offline User" 
    size="md" 
    status="offline"
/>

<Avatar 
    src="https://picsum.photos/id/338/48" 
    alt="Busy User" 
    size="md" 
    status="busy"
/>

<Avatar 
    src="https://picsum.photos/id/177/48" 
    alt="Away User" 
    size="md" 
    status="away"
/>

<div class="nx-avatar-group">
  <div class="nx-avatar nx-avatar-md">
    <img src="https://picsum.photos/id/64/48" alt="User 1">
  </div>
  <div class="nx-avatar nx-avatar-md">
    <img src="https://picsum.photos/id/1027/48" alt="User 2">
  </div>
  <div class="nx-avatar nx-avatar-md">
    <img src="https://picsum.photos/id/338/48" alt="User 3">
  </div>
</div>

<Avatar 
    src="https://picsum.photos/id/64/48?grayscale" 
    alt="Grayscale Avatar" 
    size="md" 
/>

<Avatar 
    src="https://picsum.photos/id/1027/48?blur=2" 
    alt="Blurred Avatar" 
    size="md" 
/>

<div class="nx-avatar nx-avatar-md nx-avatar-badge" data-badge="3">
  <img src="https://picsum.photos/id/64/48" alt="User with notifications">
</div>

<Avatar 
    class="nx-avatar-border nx-border-primary"src="https://picsum.photos/id/64/48" 
    alt="Avatar with primary border" 
    size="md" 
/>

<div class="nx-avatar nx-avatar-md nx-avatar-tooltip" data-tooltip="John Doe">
  <img src="https://picsum.photos/id/64/48" alt="John Doe">
</div>
      

<div class="nx-avatar-stack">
  <div class="nx-avatar nx-avatar-md">
    <img src="https://picsum.photos/id/64/48" alt="User 1">
  </div>
  <!-- ... more avatars ... -->
  <div class="nx-avatar nx-avatar-md nx-avatar-more">
    <span>+5</span>
  </div>
</div>

<Avatar 
     class="nx-avatar-skeleton"size="md" 
/>