Avatar

Initials-first avatars and an overlapping stack. No image? No onError handler — initials are the default, images are the enhancement.

plain CSS — works everywhere

PreviewCode

<div class="flex -space-x-2">
  <span class="flex size-9 items-center justify-center rounded-full border-2 border-background bg-primary text-xs font-medium text-primary-foreground">JT</span>
  <span class="flex size-9 items-center justify-center rounded-full border-2 border-background bg-secondary text-xs font-medium text-secondary-foreground">AK</span>
  <span class="flex size-9 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-medium text-muted-foreground">ML</span>
  <span class="flex size-9 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-medium text-muted-foreground">+3</span>
</div>

How it works

Each avatar is a size-9 rounded-full span with initials; swap in <img class="size-9 rounded-full object-cover" …> when you have a picture.
The stack is flex -space-x-2 with a border-background ring on each item so overlaps stay readable in both themes.
JS avatar components exist mostly to handle image load failures — putting initials in markup and treating the image as optional removes the problem.