Avatar

An image element with a fallback for representing a user. Supports multiple sizes and graceful loading states.

#Installation

npx @dinachi/cli@latest add avatar

#Usage

tsx

import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'

#Examples

#Image optimizers

AvatarImage preloads src and renders once it loads, which breaks with next/image and loading="lazy". Add keepMounted to render the image right away. The fallback shows beneath it until the image loads, and stays if it fails.

tsx

import Image from 'next/image'
 
<Avatar>
  <AvatarFallback>JD</AvatarFallback>
  <AvatarImage
    keepMounted
    render={<Image src="/avatars/jane.png" width={40} height={40} alt="Jane Doe" />}
  />
</Avatar>

#API Reference

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	The size of the avatar
src	string	—	The image source URL for the avatar
alt	string	—	Alternative text for the avatar image
keepMounted	boolean	false	Render the image immediately and let it load in place. Needed for next/image and loading="lazy".
fallback	React.ReactNode	—	Content to display when the image fails to load or is not provided

Getting started

Foundations

Integrations

Form19

Display5

Layout4

Navigation4

Overlay8

Feedback4

Motion19