Avatar

An image element with a fallback for representing the user.

Installation

npx shadcn@latest add avatar

Usage

Import and use the avatar component in your project.

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

export default function MyComponent() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}

Examples

Default

An avatar with an image and fallback.

Fallback

Avatar fallback is shown when the image fails to load.

Multiple Avatars

Display multiple avatars together.

SCJDAB+3

API Reference

Props available for the Avatar component.

Avatar

Prop	Type	Default	Description
className	string	-	Additional CSS classes to apply to the avatar.

AvatarImage

Prop	Type	Default	Description
src*	string	-	The image source URL.
alt	string	-	Alternative text for the image.
className	string	-	Additional CSS classes to apply.

AvatarFallback

Prop	Type	Default	Description
children*	React.ReactNode	-	Content to display when image fails to load (usually initials).
delayMs	number	-	Delay in ms before showing fallback.
className	string	-	Additional CSS classes to apply.

Accessibility

Avatar component follows WAI-ARIA image pattern.

Alternative Text

Always provide meaningful alt text for the AvatarImage component to ensure screen reader users can understand the content.

Fallback Content

Use clear, recognizable fallback content (like initials) that conveys the same information as the image would.