Avatar

The Avatar component displays a user’s profile picture, initials, or fallback icon. It’s designed to be used in user interfaces to represent a person or entity.

Usage

<script>
  import { 
    Avatar,
    AvatarImage,
    AvatarFallback
  } from "$lib/components/ui/avatar";
</script>

<Avatar>
  <AvatarImage src="https://example.com/avatar.jpg" alt="User's Name" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Examples

Basic Avatar

A simple avatar with an image and fallback text.

With Fallback

An avatar with a fallback for when the image fails to load or is not provided.

Various Sizes

Avatars in different sizes using Tailwind classes.

Custom Fallback Content

Avatars with different types of fallback content.

👤

Within a User Profile

Avatar used in a user profile card.

John Doe

Director of Photography

Avatar Group

A group of overlapping avatars to represent a team or group.

API Reference

Avatar Components

Component	Description
`Avatar`	The root container for the avatar component.
`AvatarImage`	The image element for the avatar.
`AvatarFallback`	The fallback element displayed when the image is not available.

Avatar Properties

Property	Type	Default	Description
`class`	`string`	`undefined`	Custom CSS classes for the avatar container.

AvatarImage Properties

Property	Type	Default	Description
`src`	`string`	`undefined`	The source URL of the avatar image.
`alt`	`string`	`""`	The alt text description of the image for accessibility.
`class`	`string`	`undefined`	Custom CSS classes for the avatar image.

AvatarFallback Properties

Property	Type	Default	Description
`class`	`string`	`undefined`	Custom CSS classes for the fallback element.

Implementation

The Avatar component is implemented as a set of three components that work together to provide a consistent and accessible user representation. The components use a context to ensure that they’re used in the proper hierarchy:

<!-- Avatar component -->
<div class={cn(
  'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border border-border-weak bg-muted',
  className
)}>
  <slot />
</div>

<!-- AvatarImage component -->
<img {src} {alt} class={cn('aspect-square h-full w-full object-cover', className)} />

<!-- AvatarFallback component -->
<div class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}>
  <slot />
</div>

The Avatar component’s default size is h-10 w-10 (40px × 40px), but this can be customized using Tailwind classes. The AvatarImage component maintains the aspect ratio and fills the container with the image, while the AvatarFallback component centers its content and provides a background.

The components work together to create a seamless experience, with the fallback content displaying only when the image is not available. This provides a consistent representation for users regardless of whether their image can be loaded.