Avatar

User image with an initials fallback when it fails to load.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add avatar

What add avatar installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

ARLM+3

If the image fails to load, the initials are shown.

SMMDLG

Three sizes: sm (32 px), default (40 px) and lg (48 px). The fallback font scales with the avatar.

ARLMTS+3

Several overlapping avatars composed together.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`Avatar` Round container; control its size with the size prop.	`span`	—
`size` Avatar size: 32, 40 or 48 px, with the fallback font scaled to match.	`"sm" \| "default" \| "lg"`	`"default"`
`AvatarImage` Image; fades in when loaded and hides if it fails.	`img`	—
`AvatarFallback` Alternative content (initials or an icon).	`span`	—

The states that apply to this component and their visual treatment.

State	Treatment
Loading	Shows the fallback while the image loads.
Loaded	The image fades in and covers the container.
Fallback	If the image fails, the initials or an icon remain.

Give AvatarImage a descriptive alt with the person's name.

The fallback appears while the image loads or if it fails; use initials or an icon, not color alone.