Avatar

A visual representation of a user or entity, typically displaying a profile picture or initials as a fallback.

Usage

import { Avatar } from "@rhinolabs/ui"

export default function AvatarDemo() {
  return (
    <Avatar>
      <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
      <Avatar.Fallback>CN</Avatar.Fallback>
    </Avatar>
  )
}

Examples

Basic Avatar

A simple avatar with an image and fallback text.

<Avatar>
  <Avatar.Image src="https://github.com/shadcn.png" alt="User" />
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>

With Fallback

Avatar displaying fallback content when image fails to load.

<div className="flex gap-4">
  <Avatar>
    <Avatar.Image src="/broken-image.jpg" alt="User" />
    <Avatar.Fallback>JD</Avatar.Fallback>
  </Avatar>

  <Avatar>
    <Avatar.Image src="/another-broken-image.jpg" alt="User" />
    <Avatar.Fallback>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="h-4 w-4"
      >
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
        <circle cx="12" cy="7" r="4" />
      </svg>
    </Avatar.Fallback>
  </Avatar>
</div>

Custom Sizing

Avatars can be sized using CSS classes.

<div className="flex gap-4">
  <Avatar className="h-6 w-6">
    <Avatar.Image src="https://github.com/shadcn.png" alt="User" />
    <Avatar.Fallback>S</Avatar.Fallback>
  </Avatar>

  <Avatar className="h-12 w-12">
    <Avatar.Image src="https://github.com/shadcn.png" alt="User" />
    <Avatar.Fallback>SM</Avatar.Fallback>
  </Avatar>
</div>

Props

Avatar Props

The Avatar component accepts all standard HTML div attributes.

AvatarImage Props

Prop	Type	Description
src	string	The image source URL
alt	string	Alternative text for the image

The AvatarImage component also accepts all standard HTML img attributes.

AvatarFallback Props

The AvatarFallback component accepts all standard HTML div attributes.

Design Considerations

• Use appropriate image sizes to maintain quality
• Provide meaningful alt text for accessibility
• Keep fallback content concise (1-2 characters ideal)
• Maintain consistent sizing within your application
• Consider using initials or icons for fallback content

Accessibility

The Avatar component follows WAI-ARIA guidelines:

• Provides proper image alt text support
• Ensures fallback content is accessible
• Maintains good color contrast
• Supports keyboard navigation when interactive