Avatar

An image element with a fallback for representing the user.

Examples

CN ER
CN LR ER
View Code 
<!-- Basic Avatar -->
<c-avatar>
  <c-avatar-image
    src="https://github.com/shadcn.png"
    alt="@shadcn"
  ></c-avatar-image>
  <c-avatar-fallback>CN</c-avatar-fallback>
</c-avatar>

<!-- Rounded-lg Avatar -->
<c-avatar avatar-classes="rounded-lg">
  <c-avatar-image
    src="https://github.com/evilrabbit.png"
    alt="@evilrabbit"
  ></c-avatar-image>
  <c-avatar-fallback>ER</c-avatar-fallback>
</c-avatar>

<!-- Stacked Avatar Group -->
<div
  class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
>
  <c-avatar>
    <c-avatar-image
      src="https://github.com/shadcn.png"
      alt="@shadcn"
    ></c-avatar-image>
    <c-avatar-fallback>CN</c-avatar-fallback>
  </c-avatar>
  <c-avatar>
    <c-avatar-image
      src="https://github.com/leerob.png"
      alt="@leerob"
    ></c-avatar-image>
    <c-avatar-fallback>LR</c-avatar-fallback>
  </c-avatar>
  <c-avatar>
    <c-avatar-image
      src="https://github.com/evilrabbit.png"
      alt="@evilrabbit"
    ></c-avatar-image>
    <c-avatar-fallback>ER</c-avatar-fallback>
  </c-avatar>
</div>

API Reference

Avatar

Prop Type Default
avatar-classes string -

AvatarImage

Prop Type Default
src string -
alt string -
image-classes string -

AvatarFallback

Prop Type Default
fallback-classes string -