Avatar

uistable

Avatar — extracted 1:1 from WEM-App.

npx shadcn add @krawma/avatar

npm: radix-ui@^1.6.1 · registry: @krawma/utils

Preview

Depends on

utils

Purpose

A small image representation of a user or entity, with a graceful text/initials fallback when the image is missing or slow. Includes group + badge sub-parts for stacked avatars and status dots.

Anatomy

Avatar › AvatarImage + AvatarFallback. Plus AvatarGroup / AvatarGroupCount (overlapping stacks) and AvatarBadge (status/decoration) — WEM-App additions.

Style

No variants — a round token-backed surface. Size via className (size-*). The fallback shows initials/an icon until the image loads.

Behavior & functionality

AvatarImage swaps to AvatarFallback on load error or while loading — always provide a fallback.

Accessibility

Give AvatarImage a meaningful alt (the person/entity name). Decorative-only avatars can use an empty alt.
Fallback initials should correspond to the same name.

Do / Don't

✅ Always include an AvatarFallback.
❌ Don't encode status by avatar color alone — use AvatarBadge + a label.