Avatar

An image element with a fallback for representing the user.

@react.component
let make = () =>
  <div className="flex flex-row flex-wrap items-center gap-6 md:gap-12">

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Avatar
Copy

Usage

Copy<Avatar>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback> {"CN"->React.string} </Avatar.Fallback>
</Avatar>

Examples

Basic

A basic avatar component with an image and a fallback.

@react.component
let make = () =>
  <Avatar>

Badge

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

@react.component
let make = () =>
  <Avatar>

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

Copy<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback> {"CN"->React.string} </AvatarFallback>
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge with Icon

You can also use an icon inside <Avatar.Badge>.

@react.component
let make = () =>
  <Avatar className="grayscale">

Avatar Group

Use the Avatar.Group component to add a group of avatars.

@react.component
let make = () =>
  <Avatar.Group className="grayscale">

Avatar Group Count

Use <Avatar.GroupCount> to add a count to the group.

@react.component
let make = () =>
  <Avatar.Group className="grayscale">

Avatar Group with Icon

You can also use an icon inside <Avatar.GroupCount>.

@react.component
let make = () =>
  <Avatar.Group className="grayscale">

Sizes

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

@react.component
let make = () =>
  <div className="flex flex-wrap items-center gap-2 grayscale">

Dropdown

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

@react.component
let make = () => {
  <DropdownMenu>

API Reference

Avatar

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

AvatarImage

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

AvatarFallback

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

AvatarBadge

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

Avatar.Group

The Avatar.Group 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 Base UI Avatar props, see the Base UI documentation.