Hex UIv0.1

Avatar

A user profile image with a fallback (usually initials) rendered when the image is missing or fails to load. Built on Radix UI Avatar — AvatarFallback accepts a delayMs prop to avoid flashing during fast loads.

Image + fallback

OCJD

Sizes

SMMDLG

With status dot

OCOnline

Stacked

OCABJD+4

Installation

pnpm
pnpm dlx @hex-core/cli add avatar

API Reference

PropTypeDefaultDescription
className
string—Additional CSS classes on the root

AI Guidance

When to use

Use for user profile images: headers, comments, user lists. Always include AvatarFallback for accessibility and loading states.

When not to use

Don't use for decorative icons (use an <img> or icon component). Don't use for product/brand images (use <img> with proper sizing).

Common mistakes

  • Missing alt text on AvatarImage
  • No AvatarFallback — shows nothing when image is missing or errors
  • Omitting delayMs on AvatarFallback causes flicker for fast-loading images
  • Using for non-circular images (override rounded-full if needed)

Accessibility

AvatarImage requires alt text. AvatarFallback renders initials or an icon — ensure the visible text is meaningful.

Related components

Token budget: 250

Edit this page on GitHub