PUI.Avatar renders an image when src is present and a fallback when it is
not. It does not assume an icon provider or add client-side image handling.
Sizes and fallbacks
SC
PU
TM
heex
<div class="flex items-center gap-4">
<.avatar size="sm" alt="Sucipto" fallback_text="SC" />
<.avatar alt="PUI" fallback_text="PU" />
<.avatar size="lg" alt="Team">
<:fallback>TM</:fallback>
</.avatar>
</div>Image source
Host-owned image and alt text
heex
<div class="flex items-center gap-3">
<.avatar src="/images/logo.svg" alt="PUI logo" size="lg" fallback_text="PU" />
<span class="text-sm text-muted-foreground">Host-owned image and alt text</span>
</div>