Avatar

Preview

Installation

npx shadcn@latest add @cubby-ui/avatar

Usage

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

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

Examples

Sizes

Display avatars in different sizes.

Fallback

Show fallback content when image fails to load.

Avatar Group

Display multiple avatars in a group layout.

With Status Indicator

Add online/offline status indicators to avatars.

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