Avatar

An image element with a fallback for representing the user.

data-display

image

user

profile

Preview

CNJD

Code

TSX

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

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

API Reference

Prop	Type	Default	Description
src	string	-	The image source to display.
alt	string	-	The alt text for the avatar image.
delayMs	number	600	The delay in milliseconds before showing the fallback.

View Full Documentation