Skip to content
Spira
Surfaces

Avatar

User images with a graceful initials fallback.

Image & fallback

Falls back to initials when the image is missing.

KEKE★
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui";

<div className="flex items-center gap-4">
  <Avatar>
    <AvatarImage src="https://github.com/oyaksaile.png" alt="Kayo Elias" />
    <AvatarFallback>KE</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>KE</AvatarFallback>
  </Avatar>
  <Avatar className="size-14">
    <AvatarFallback>★</AvatarFallback>
  </Avatar>
</div>