Avatar
User profile image with fallback initials
Preview
JDABZY
Usage
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="User" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>The AvatarFallback renders when the image fails to load or while it is loading. Typically you'd show the user's initials.
Install
npx shadcn add @bonsai/avatar