Components
Avatar
A circular image-with-fallback built from utility classes.
Avatars are pure composition with no dedicated class. Stack an image over a text
fallback with grid grid-area-pile, clip to a circle with rounded-full overflow-clip, and
size with size-*. The image sits on top; the fallback (initials on bg-muted /
text-muted-foreground) shows when it fails to load. For an initials-only avatar, drop the
<img> and keep just the <figcaption>.
Default
Loading components…
<div class="flex items-center gap-xs"> <figure class="grid grid-area-pile size-lg bg-background border rounded-full overflow-clip" role="img" > <img class="size-full object-cover order-last bg-transparent" width="64" height="64" loading="lazy" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=facearea&facepad=2&w=64&h=64&q=90" alt="John Doe" aria-hidden="true" /> <figcaption class="order-first bg-muted size-full text-muted-foreground flex items-center justify-center text-center text-md font-strong" > <span class="sr-only">John Doe</span> <span aria-hidden="true">JD</span> </figcaption> </figure> <div class="flex flex-col"> <span class="text-sm font-strong leading-none">John Doe</span> <span class="text-xs text-muted-foreground">Founder, ACME Inc.</span> </div></div><div class="flex items-center gap-xs"> <figure class="grid grid-area-pile size-lg bg-background border rounded-full overflow-clip" role="img" > <figcaption class="order-first bg-muted size-full text-muted-foreground flex items-center justify-center text-center text-md font-strong" > <span class="sr-only">John Doe</span> <span aria-hidden="true">JD</span> </figcaption> </figure> <div class="flex flex-col"> <span class="text-sm font-strong leading-none">John Doe</span> <span class="text-xs text-muted-foreground">Founder, ACME Inc.</span> </div></div>