# Avatar

> User image with automatic initials fallback.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/avatar.json`

## Install

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

### With image and fallback

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

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

### Sizes and grouping

```tsx
<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>
```

### With status indicator

AvatarBadge is positioned bottom-right with a ring cut out of the avatar: use a color to signal presence.

```tsx
<Avatar>
  <AvatarImage src={user.avatar_url} alt={user.display_name} />
  <AvatarFallback>SQ</AvatarFallback>
  <AvatarBadge className="bg-emerald-500" aria-label="Online" />
</Avatar>
```

### Avatar group with overflow

AvatarGroup overlaps members; AvatarGroupCount caps the list with a +N tally.

```tsx
<AvatarGroup>
  <Avatar>
    <AvatarImage src={a.avatar_url} alt={a.display_name} />
    <AvatarFallback>OM</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>JL</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>CC</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>
```

## Notes

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