Avatar

bosia add avatar

An avatar with image and fallback support. Shows fallback content when the image fails to load.

Usage

<script lang="ts">
  import { Avatar, AvatarFallback } from "$lib/components/ui/avatar";
</script>

<!-- With image -->
<Avatar src="/photo.jpg" alt="John Doe">
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

<!-- Fallback only -->
<Avatar>
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

Custom Size

<Avatar src="/photo.jpg" alt="User" class="h-16 w-16">
  <AvatarFallback>U</AvatarFallback>
</Avatar>