ComponentsData Display
Avatar
An image element representing a user or entity, with a text fallback.
Overview
An avatar represents a user or entity with an image, falling back to initials
when the image is unavailable. Always provide an AvatarFallback.
CN
$ npx morpha-ui add avatarExamples
Fallback initials
MU
Group
CNABCD
+3
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add avatar. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add avatarAPI Reference
The Avatar root accepts a size prop. The parts — AvatarImage,
AvatarFallback, AvatarGroup, AvatarGroupCount, and AvatarBadge — compose
the avatar and its grouped/badged variations.
Prop
Type
Accessibility
- Always include an
AvatarFallbackso something renders when the image fails to load. - Give
AvatarImagea meaningfulaltdescribing who or what it represents.