Avatar

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/avatar.json

Usage

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

<Avatar>
  <AvatarImage src="…" alt="@johndoe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Examples

Initials

Use AvatarFallback to display user initials when no image is available.

Size

Badge

Use the AvatarBadge component to add a badge indicator to the avatar. The badge is positioned at the bottom right.

Ring

Group

Use the AvatarGroup component to display a group of avatars with overlapping styling. Use AvatarGroupCount to show a count of additional avatars.

API reference

Avatar

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

AvatarImage

The AvatarImage component displays the avatar image. It accepts all Radix UI Avatar Image props.

AvatarFallback

The AvatarFallback component displays a fallback when the image fails to load. It accepts all Radix UI Avatar Fallback props.

AvatarBadge

The AvatarBadge component displays a badge indicator on the avatar, typically positioned at the bottom right.

AvatarGroup

The AvatarGroup component displays a group of avatars with overlapping styling.

AvatarGroupCount

The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.

For more information about Radix UI Avatar props, see the Radix UI Avatar documentation.