Avatar

An image element with a fallback for representing the user.

Installation


pnpm dlx shadcn@latest add @force-ui-ember/avatar

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from '@/ui/avatar';

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

Use the following composition to build an Avatar:

Avatar
├── AvatarImage
└── AvatarFallback

A basic avatar component with an image and a fallback.

You can use the Avatar component as a trigger for a dropdown menu.

The Avatar component is the root component that wraps the avatar image and fallback.

Prop	Type	Default
`@class`	`string`	-

The AvatarImage component displays the avatar image.

The AvatarFallback component displays a fallback when the image fails to load.

Prop	Type	Default
`@class`	`string`	-

On This Page

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.