Get started
Fabricator UI

Search documentation

Search pages, components, blocks, styles and colours.

Avatar

PreviousNext

An image element with a fallback for representing the user.

Base UIReact AriaRadix UI
@gabrielespinheira
CN
@evilrabbit
ER
@gabrielespinheira
CN
@maxleiter
LR
@evilrabbit
ER
+3

Installation

bunx --bun fabricator-ui@latest add avatar

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
<Avatar>
  <AvatarImage src="https://github.com/gabrielespinheira.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Composition

Use the following composition to build an Avatar:

Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

Use the following composition to build an AvatarGroup:

AvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

Basic

A basic avatar component with an image and a fallback.

@gabrielespinheira
CN

Badge

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

@gabrielespinheira
CN

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

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

Badge with Icon

You can also use an icon inside <AvatarBadge>.

@pranathip
PP

Avatar Group

Use the AvatarGroup component to add a group of avatars.

@gabrielespinheira
CN
@maxleiter
LR
@evilrabbit
ER

Avatar Group Count

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

@gabrielespinheira
CN
@maxleiter
LR
@evilrabbit
ER
+3

Avatar Group with Icon

You can also use an icon inside <AvatarGroupCount>.

@gabrielespinheira
CN
@maxleiter
LR
@evilrabbit
ER

Sizes

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

@gabrielespinheira
CN
@gabrielespinheira
CN
@gabrielespinheira
CN

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.

PropTypeDefault
size"default" | "sm" | "lg""default"
classNamestring-

AvatarImage

The AvatarImage component displays the avatar image.

PropTypeDefault
srcstring-
altstring-
classNamestring-

AvatarFallback

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

PropTypeDefault
classNamestring-

AvatarBadge

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

PropTypeDefault
classNamestring-

AvatarGroup

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

PropTypeDefault
classNamestring-

AvatarGroupCount

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

PropTypeDefault
classNamestring-