Avatar

An avatar shows a user's profile image, falling back to initials or an icon when the image is missing or fails to load. Use it in comment threads, member lists, navbars, and anywhere you identify a person or account.

Preview

Installation

npx shadcn@latest add @cubby-ui/avatar

Usage

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

<Avatar>
  <AvatarImage />
  <AvatarFallback />
</Avatar>

Composition

Avatar
├── AvatarImage
└── AvatarFallback

Examples

Sizes

Use size to set the avatar's dimensions.

Fallback

AvatarFallback renders when the image is missing or fails to load.

Avatar Group

Overlap avatars to show a group of users compactly.

With Status Indicator

Overlay a dot on the avatar to show online or offline state.

Accessibility

Give AvatarImage an alt describing who it represents (typically the person's name). Provide an AvatarFallback so the avatar still conveys identity when the image fails to load.

<Avatar>
  <AvatarImage src="/users/ada.jpg" alt="Ada Lovelace" />
  <AvatarFallback>AL</AvatarFallback>
</Avatar>

API Reference

The Avatar component is built on top of Base UI's Avatar. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.

For the complete Base UI API, see the Base UI Avatar documentation.

Custom Props

Avatar