Avatar

User image with automatic initials fallback.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { Avatar, AvatarImage, AvatarFallback } from "@aspyn-io/kit";

With image and fallback

The fallback shows while the image loads or if it fails.

SQAS

<Avatar>
  <AvatarImage src={user.avatar_url} alt={user.display_name} />
  <AvatarFallback>SQ</AvatarFallback>
</Avatar>

Sizes and grouping

OMJL+3

<div className="flex -space-x-2">
  <Avatar className="h-8 w-8 ring-2 ring-background">…</Avatar>
  <Avatar className="h-8 w-8 ring-2 ring-background">…</Avatar>
  <Avatar className="h-8 w-8 ring-2 ring-background">
    <AvatarFallback>+3</AvatarFallback>
  </Avatar>
</div>

Notes

Fallback initials derive from user display names — remember Aspyn API responses are snake_case (user.display_name).