Components
Avatar
Circular image with fallback composed using utility classes.
Avatars are composed with utility classes. Stack an image over fallback text using grid grid-area-pile, clip with rounded-full overflow-clip, and set dimensions with size-*.
Fallback text (bg-muted, text-muted-foreground) shows if the image fails to load. For text-only avatars, omit the <img> element.
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>