Avatar

An image element with a fallback for representing the user.

CNER

CNLRER

import {  Avatar,  AvatarFallback,  AvatarImage, } from "@/components/ui/avatar"  export function AvatarDemo() {  return (  <div className="flex flex-row flex-wrap items-center gap-12">  <Avatar>  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />  <AvatarFallback>CN</AvatarFallback>  </Avatar>  <Avatar className="rounded-lg">  <AvatarImage  src="https://github.com/evilrabbit.png"  alt="@evilrabbit"  />  <AvatarFallback>ER</AvatarFallback>  </Avatar>  <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">  <Avatar>  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />  <AvatarFallback>CN</AvatarFallback>  </Avatar>  <Avatar>  <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />  <AvatarFallback>LR</AvatarFallback>  </Avatar>  <Avatar>  <AvatarImage  src="https://github.com/evilrabbit.png"  alt="@evilrabbit"  />  <AvatarFallback>ER</AvatarFallback>  </Avatar>  </div>  </div>  ) }

Installation


pnpm dlx shadcn@latest add avatar

Usage

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

<Avatar>  <AvatarImage src="https://github.com/shadcn.png" />  <AvatarFallback>CN</AvatarFallback> </Avatar>

Aspect Ratio Badge

On This Page

Installation Usage

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.