avatar.tsx)¶

Overview¶

A versatile avatar component built with Radix UI primitives that provides image display with fallback support and customizable styling.

Features¶

Image avatar display
Fallback content support
Rounded design
Aspect ratio maintenance
Overflow handling
Custom sizing
Flexible styling
Client-side rendering
Accessibility support
Responsive design

Dependencies¶

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/lib/utils"

Props¶

interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
  className?: string;
}

interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
  className?: string;
}

interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
  className?: string;
}

Implementation¶

State Management¶

No internal state management - components are controlled through props.

Methods¶

Components use React's forwardRef for ref handling and prop spreading.

Unique Functionality¶

Root avatar container management
Image display with aspect ratio control
Fallback content rendering
Class name merging with utility function

HTML Structure¶

// Avatar Root
<AvatarPrimitive.Root
  ref={ref}
  className={cn(
    "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
    className
  )}
  {...props}
/>

// Avatar Image
<AvatarPrimitive.Image
  ref={ref}
  className={cn("aspect-square h-full w-full", className)}
  {...props}
/>

// Avatar Fallback
<AvatarPrimitive.Fallback
  ref={ref}
  className={cn(
    "flex h-full w-full items-center justify-center rounded-full bg-muted",
    className
  )}
  {...props}
/>

API Integration¶

No direct API integration required.

Components Used¶

AvatarPrimitive.Root from @radix-ui/react-avatar
AvatarPrimitive.Image from @radix-ui/react-avatar
AvatarPrimitive.Fallback from @radix-ui/react-avatar

Notes¶

Uses Radix UI primitives
Supports custom styling
Handles image loading
Provides fallback content
Maintains aspect ratio
Client-side rendered

Pages/Components Referenced By¶

Key Notes¶

Implement proper image error handling
Use lazy loading for performance
Ensure accessible alt text
Maintain consistent sizing
Handle status updates efficiently