Avatar

A visual component used to display a user's profile picture or initials as a fallback when an image isn't available or fails to load.

Docs API Reference

This preview shows the Avatar component displaying an image, with a fallback (initials) ready if the image fails to load.

Installation

To use the Avatar component in your project, you need to install it. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.

The CLI command is the easiest way to add the Avatar component. It automatically handles downloading the necessary code and dependencies for you. Running this command in your project's terminal will add the avatar component files.

npx shadcn@latest add avatar

Usage

Once installed, import the necessary parts of the Avatar component.

  Avatar, // The main container for the avatar elements
  AvatarFallback, // The content displayed if the image fails to load (e.g., initials)
  AvatarImage, // The image element itself
} from "@/components/ui/avatar"; // Adjust path as needed

Here's how to structure the Avatar component:

Avatar is the main wrapper.
AvatarImage holds the src for the desired image. It will be displayed if the image loads successfully.
AvatarFallback contains the content (usually initials or an icon) to display if the AvatarImage fails to load or while it's loading.

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  image source and alt text
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Aspect Ratio Badge