<!-- source-hash: a19f49d19a491007b87315d6c4ac298c -->
A React avatar component built on top of Radix UI primitives that provides accessible profile picture display with fallback support and customizable styling.

## Key Components

- **Avatar** - Main container component with circular styling and overflow handling
- **AvatarImage** - Image component that displays the profile picture with proper aspect ratio
- **AvatarFallback** - Fallback component shown when the image fails to load or is unavailable

## Usage Example

```typescript
import { Avatar, AvatarImage, AvatarFallback } from "./avatar"

// Basic avatar with fallback
<Avatar>
  <AvatarImage src="https://example.com/profile.jpg" alt="User Name" />
  <AvatarFallback>UN</AvatarFallback>
</Avatar>

// Custom sized avatar
<Avatar className="h-16 w-16">
  <AvatarImage src="/avatar.png" />
  <AvatarFallback className="text-lg">JD</AvatarFallback>
</Avatar>

// Fallback-only avatar
<Avatar>
  <AvatarFallback className="bg-blue-500 text-white">
    AB
  </AvatarFallback>
</Avatar>
```

The component automatically handles image loading states - if the `AvatarImage` fails to load, the `AvatarFallback` content will be displayed instead. All components support ref forwarding and can be customized with additional CSS classes through the `className` prop.