@neynar/ui/llm-docs/avatar.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Avatar

**Type**: component

Avatar - A flexible container for displaying user profile images with graceful fallback support The Avatar component is built on Radix UI's Avatar primitive and provides a robust solution for displaying user profile pictures throughout your application. It automatically handles image loading states and displays fallback content when images fail to load or are unavailable. This component follows the shadcn/ui design system principles and provides a consistent approach to user representation across all applications. ## Features - **Automatic loading states**: Seamlessly handles image loading and error states - **Graceful fallbacks**: Shows fallback content when images are unavailable - **Flexible sizing**: Easy customization through Tailwind CSS size utilities - **Shape variants**: Circular by default with support for rounded corners - **Accessibility first**: Built-in ARIA attributes and keyboard navigation - **Composable design**: Works with AvatarImage and AvatarFallback sub-components - **Polymorphic rendering**: Supports asChild prop for custom element rendering ## Common Use Cases - User profile displays in headers and navigation - Comment sections and author attribution - Team member listings and directories - Avatar groups with overlapping layouts - Organization logos and brand representation - Loading states and placeholder content ## Size Variants - `size-6` (24px) - Small avatars for dense layouts - `size-8` (32px) - Default size for most use cases - `size-10` (40px) - Medium avatars for lists - `size-12` (48px) - Large avatars for profiles - `size-16` (64px) - Extra large for main profile displays

## JSX Usage

```jsx
import { Avatar } from '@neynar/ui';

<Avatar
  className="value"
  asChild={true}
>
  {/* Your content here */}
</Avatar>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for styling. Common patterns include size utilities (size-6, size-8, size-10, size-12, size-16) and border radius overrides (rounded-lg, rounded-md, rounded-none)

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Should contain AvatarImage and AvatarFallback components for proper functionality

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: Change the default rendered element for the one passed as a child, merging their props and behavior