Skip to content
PixeloreUI
Data Display

Avatar

A square portrait with pixel-perfect image rendering and a typographic fallback. Wraps Radix Avatar so the fallback only renders when the image fails or hasn't loaded.

Default

ESL

Sizes

Override the size by passing a Tailwind h-* w-* utility through className.

SML

Accessibility notes

  • Always provide an alt on AvatarImage. Decorative avatars (next to the person's name in the same row) should set alt=“” so screen readers skip the duplicate.
  • AvatarImage applies image-rendering: pixelated automatically — feed it a small low-resolution PNG to keep the 8-bit feel.
  • AvatarFallbackrenders the typographic initials only after Radix decides the image won't load — there's never a flash.
Edit this page on GitHub