> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatar

> An avatar component for displaying user profile images with fallback support, built on @base-ui/react.

The Avatar component displays user profile pictures with automatic fallback to initials or placeholder content.

## Installation

```tsx theme={null}
import {
  Avatar,
  AvatarImage,
  AvatarFallback,
} from "@craftdotui/baseui/components/avatar";
```

## Usage

```tsx theme={null}
<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User name" />
  <AvatarFallback>UN</AvatarFallback>
</Avatar>
```

## Components

### Avatar (Root)

<ParamField path="className" type="string">
  Additional CSS classes.
</ParamField>

The container for the avatar image and fallback.

### AvatarImage

<ParamField path="src" type="string" required>
  Image source URL.
</ParamField>

<ParamField path="alt" type="string" required>
  Alternative text for the image.
</ParamField>

<ParamField path="onLoadingStatusChange" type="function">
  Callback when loading status changes.
</ParamField>

The avatar image. Shows fallback if image fails to load.

### AvatarFallback

<ParamField path="className" type="string">
  Additional CSS classes.
</ParamField>

Displayed when the image is loading or fails to load.

## Examples

### Basic Avatar

```tsx theme={null}
<Avatar>
  <AvatarImage src="/user.jpg" alt="John Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
```

### Avatar Group

```tsx theme={null}
<div className="flex -space-x-2">
  <Avatar>
    <AvatarImage src="/user1.jpg" alt="User 1" />
    <AvatarFallback>U1</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/user2.jpg" alt="User 2" />
    <AvatarFallback>U2</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/user3.jpg" alt="User 3" />
    <AvatarFallback>U3</AvatarFallback>
  </Avatar>
</div>
```

### Custom Size

```tsx theme={null}
<Avatar className="size-12">
  <AvatarImage src="/user.jpg" alt="User" />
  <AvatarFallback>U</AvatarFallback>
</Avatar>

<Avatar className="size-16">
  <AvatarImage src="/user.jpg" alt="User" />
  <AvatarFallback>U</AvatarFallback>
</Avatar>
```

### Fallback Only

```tsx theme={null}
<Avatar>
  <AvatarFallback>AB</AvatarFallback>
</Avatar>
```

## Accessibility

* Built on @base-ui/react for accessibility
* Requires alt text on images
* Automatic fallback when image fails
* Proper semantic HTML