← All Components

Avatar

User photo with fallback initials. Built on Radix Avatar.

With Image

ALBOCA

Fallback Only

JDMKZR

Custom Sizes

SMMDLG

Props

PropTypeDescription
classNamestringAdditional classes on the root element
childrenReactNodeAvatar.Image and Avatar.Fallback sub-components

Sub-components

ComponentPropsDescription
Avatar.Imagesrc, alt, classNameRenders the user photo
Avatar.Fallbackchildren, classNameShown while image loads or when no src is set

Usage

<Avatar> <Avatar.Image src="/photo.jpg" alt="Jane Doe" /> <Avatar.Fallback>JD</Avatar.Fallback> </Avatar>