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

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

# AvatarFallback

**Type**: component

AvatarFallback - Fallback content displayed when the avatar image is unavailable This component renders alternative content when the AvatarImage is loading, fails to load, or is not provided. It's built on Radix UI's Avatar.Fallback primitive and provides a visually appealing placeholder that maintains the avatar's design consistency. ## When AvatarFallback is Shown The fallback is automatically displayed in these scenarios: - **Image loading**: While the AvatarImage is being loaded - **Image error**: When the AvatarImage fails to load (broken URL, network error) - **No image**: When no AvatarImage component is provided - **Empty src**: When AvatarImage has no src prop or empty src ## Common Use Cases - **User initials**: Most common pattern (2-3 characters) - **Generic icons**: User, person, or company icons - **Brand initials**: For organization avatars - **Loading states**: With animations or loading indicators - **Placeholder content**: For new or anonymous users - **Custom graphics**: SVG icons or other visual elements ## Design Considerations - Uses muted background color for subtle appearance - Automatically centers content both horizontally and vertically - Inherits size and border radius from parent Avatar - Should complement the overall design system - Supports delay to prevent flash during fast image loads

## JSX Usage

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

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

## Component Props

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: The fallback content to display. Common patterns include user initials (2-3 characters), icons, or loading indicators

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes. Use for custom background colors, text styling, or animations

### delayMs
- **Type**: `number`
- **Required**: No
- **Description**: Optional delay in milliseconds before showing the fallback. Useful for delaying rendering so it only appears for those with slower connections

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