Avatar

An image element with a fallback for displaying user avatars.

Usage

<!-- Image avatar -->
<div x-data="avatar({ src: '...', alt: 'User' })" x-bind="avatarAttrs">
  <img x-show="showImage" :src="src" :alt="alt" class="aspect-square size-full" />
  <span x-show="showFallback" class="flex size-full items-center justify-center text-sm font-medium text-muted-foreground" x-text="fallback"></span>
</div>

<!-- Fallback initials -->
<div x-data="avatar({ fallback: 'JD' })" x-bind="avatarAttrs">
  <span class="flex size-full items-center justify-center text-sm font-medium text-muted-foreground">JD</span>
</div>