Kutty Home Page
Docs Components GitHub

Avatar

Basic #

Photo of Praveen Juge
PJ
<div class="flex space-x-2">
  <div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar">PJ</div>
  <div class="avatar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
</div>

Sizes #

Photo of Praveen Juge
Photo of Praveen Juge
Photo of Praveen Juge
Photo of Praveen Juge
Photo of Praveen Juge
PJ
PJ
PJ
PJ
PJ
<div class="flex space-x-2">
  <div class="avatar avatar-xs"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar avatar-sm"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar avatar-lg"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar avatar-xl"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  
  <div class="avatar avatar-xs">PJ</div>
  <div class="avatar avatar-sm">PJ</div>
  <div class="avatar">PJ</div>
  <div class="avatar avatar-lg">PJ</div>
  <div class="avatar avatar-xl">PJ</div>

  <div class="avatar avatar-xs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
  <div class="avatar avatar-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
  <div class="avatar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
  <div class="avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
  <div class="avatar avatar-xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
</div>

Status #

Photo of Praveen Juge
Photo of Praveen Juge
PJ
<div class="flex space-x-2">
  <div class="avatar avatar-online"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar avatar-focused"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar avatar-offline">PJ</div>
  <div class="avatar avatar-busy"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
</div>

Stacked #

Photo of Praveen Juge
Photo of Praveen Juge
PJ
Photo of Praveen Juge
PJ
<div class="flex -space-x-5">
  <div class="avatar ring ring-white"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar ring ring-white"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar ring ring-white">PJ</div>
  <div class="avatar ring ring-white"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <div class="avatar ring ring-white">PJ</div>
</div>

With Text #

Photo of Praveen Juge

Praveen Juge

<div class="avatar-text">
  <div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
  <p>Praveen Juge</p>
</div>