Avatar

Installation

Examples

Basic

A basic avatar component with an image and a fallback.

Badge

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

Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.

<Avatar src="https://github.com/shadcn.png" alt="@shadcn" fallback="CN">
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge with Icon

You can also use an icon inside <AvatarBadge>.

Avatar Group

Use the AvatarGroup component to add a group of avatars.

Avatar Group Count

Use <AvatarGroupCount> to add a count to the group.

Avatar Group with Icon

You can also use an icon inside <AvatarGroupCount>.

Sizes

Use the size prop to change the size of the avatar.

Dropdown

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

API Reference

Avatar

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