Avatar

<div class="avatar">
  <img src="https://i.pravatar.cc/100?img=1" alt="User" />
</div>
<div class="avatar color-primary">JD</div>
<div class="avatar color-secondary">AB</div>
<div class="avatar color-accent">MK</div>

Requires: ux.min.css

<div class="relative inline-flex items-center justify-center size-10 rounded-full bg-neutral text-neutral-content font-semibold uppercase overflow-visible shrink-0">
  <img class="w-full h-full object-cover rounded-full" src="https://i.pravatar.cc/100?img=1" alt="User" />
</div>
<div class="relative inline-flex items-center justify-center size-10 rounded-full bg-primary text-primary-content font-semibold uppercase shrink-0">JD</div>
<div class="relative inline-flex items-center justify-center size-10 rounded-full bg-secondary text-secondary-content font-semibold uppercase shrink-0">AB</div>
<div class="relative inline-flex items-center justify-center size-10 rounded-full bg-accent text-accent-content font-semibold uppercase shrink-0">MK</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div class="avatar avatar-xs color-primary">XS</div>
<div class="avatar avatar-sm color-primary">SM</div>
<div class="avatar color-primary">MD</div>
<div class="avatar avatar-lg color-primary">LG</div>
<div class="avatar avatar-xl color-primary">XL</div>

Requires: ux.min.css

<div class="inline-flex items-center justify-center size-6 rounded-full bg-primary text-primary-content font-semibold text-[0.625rem] uppercase shrink-0">XS</div>
<div class="inline-flex items-center justify-center size-8 rounded-full bg-primary text-primary-content font-semibold text-xs uppercase shrink-0">SM</div>
<div class="inline-flex items-center justify-center size-10 rounded-full bg-primary text-primary-content font-semibold text-base uppercase shrink-0">MD</div>
<div class="inline-flex items-center justify-center size-12 rounded-full bg-primary text-primary-content font-semibold text-xl uppercase shrink-0">LG</div>
<div class="inline-flex items-center justify-center size-16 rounded-full bg-primary text-primary-content font-semibold text-2xl uppercase shrink-0">XL</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div class="avatar color-primary">
  <img src="https://i.pravatar.cc/100?img=2" alt="Round" />
</div>
<div class="avatar avatar-square color-secondary">
  <img src="https://i.pravatar.cc/100?img=3" alt="Square" />
</div>
<div class="avatar avatar-rounded color-accent">
  <img src="https://i.pravatar.cc/100?img=4" alt="Rounded" />
</div>

Requires: ux.min.css

<div class="inline-flex items-center justify-center size-10 rounded-full bg-primary shrink-0 overflow-hidden">
  <img class="w-full h-full object-cover rounded-full" src="https://i.pravatar.cc/100?img=2" alt="Round" />
</div>
<div class="inline-flex items-center justify-center size-10 rounded-field bg-secondary shrink-0 overflow-hidden">
  <img class="w-full h-full object-cover rounded-field" src="https://i.pravatar.cc/100?img=3" alt="Square" />
</div>
<div class="inline-flex items-center justify-center size-10 rounded-box bg-accent shrink-0 overflow-hidden">
  <img class="w-full h-full object-cover rounded-box" src="https://i.pravatar.cc/100?img=4" alt="Rounded" />
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div class="avatar color-primary">JD
  <span class="avatar-status avatar-status-online"></span>
</div>
<div class="avatar color-secondary">AB
  <span class="avatar-status avatar-status-busy"></span>
</div>
<div class="avatar color-accent">MK
  <span class="avatar-status avatar-status-away"></span>
</div>
<div class="avatar">
  <img src="https://i.pravatar.cc/100?img=5" alt="User" />
  <span class="avatar-status avatar-status-offline"></span>
</div>

Requires: ux.min.css

<div class="relative inline-flex items-center justify-center size-10 rounded-full bg-primary text-primary-content font-semibold uppercase shrink-0">JD
  <span class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-base-100 bg-success z-1" style="box-sizing: content-box;"></span>
</div>
<div class="relative inline-flex items-center justify-center size-10 rounded-full bg-secondary text-secondary-content font-semibold uppercase shrink-0">AB
  <span class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-base-100 bg-error z-1" style="box-sizing: content-box;"></span>
</div>
<div class="relative inline-flex items-center justify-center size-10 rounded-full bg-accent text-accent-content font-semibold uppercase shrink-0">MK
  <span class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-base-100 bg-warning z-1" style="box-sizing: content-box;"></span>
</div>
<div class="relative inline-flex items-center justify-center size-10 rounded-full bg-neutral text-neutral-content font-semibold uppercase shrink-0 overflow-visible">
  <img class="w-full h-full object-cover rounded-full" src="https://i.pravatar.cc/100?img=5" alt="User" />
  <span class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-base-100 bg-base-300 z-1" style="box-sizing: content-box;"></span>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div class="avatar-group">
  <div class="avatar color-primary">A</div>
  <div class="avatar color-secondary">B</div>
  <div class="avatar color-accent">C</div>
  <div class="avatar color-success">D</div>
  <span class="avatar-group-more">+3</span>
</div>

Requires: ux.min.css

<div class="inline-flex flex-row-reverse items-center">
  <span class="inline-flex items-center justify-center size-10 rounded-full font-semibold text-sm bg-base-200 text-base-content border-2 border-base-100 cursor-default" style="margin-left: -0.75rem; box-sizing: content-box;">+3</span>
  <div class="inline-flex items-center justify-center size-10 rounded-full bg-success text-success-content font-semibold uppercase border-2 border-base-100" style="margin-left: -0.75rem; box-sizing: content-box;">D</div>
  <div class="inline-flex items-center justify-center size-10 rounded-full bg-accent text-accent-content font-semibold uppercase border-2 border-base-100" style="margin-left: -0.75rem; box-sizing: content-box;">C</div>
  <div class="inline-flex items-center justify-center size-10 rounded-full bg-secondary text-secondary-content font-semibold uppercase border-2 border-base-100" style="margin-left: -0.75rem; box-sizing: content-box;">B</div>
  <div class="inline-flex items-center justify-center size-10 rounded-full bg-primary text-primary-content font-semibold uppercase border-2 border-base-100" style="box-sizing: content-box;">A</div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component