Avatar

Installation

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
export default function Home() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}

Props

Avatar

Radix UI Props

Avatar

• asChild - Change the default rendered element for the one passed as a child, merging their props and behavior.
• onLoadingStatusChange - Event handler called when the image loading status changes.

AvatarImage

• asChild - Change the default rendered element for the one passed as a child, merging their props and behavior.
• onLoadingStatusChange - Event handler called when the image loading status changes.
• src - The image source to use for the avatar.
• alt - The alt text to use for the avatar image.

AvatarFallback

• asChild - Change the default rendered element for the one passed as a child, merging their props and behavior.
• delayMs - Delay (in ms) before showing the fallback. Useful to prevent flickering where the fallback shows briefly before the image loads.

HTML Attributes

Avatar

• Standard div element attributes.

AvatarImage

• Standard img element attributes.

AvatarFallback

• Standard div element attributes.