primitives

Avatar

User / entity avatar. Loads an image with graceful fallback to initials or an icon. Always provide both — never just an `<img>`.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/avatar.json

Or import from the workspace package:

import { Avatar, AvatarImage, AvatarFallback } from "@8maverik8/design";

Examples

With image

<Avatar>
  <AvatarImage src="https://i.pravatar.cc/64?img=4" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Sizes

OTOTOT

<Avatar size="sm"><AvatarFallback>OT</AvatarFallback></Avatar>
<Avatar><AvatarFallback>OT</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>OT</AvatarFallback></Avatar>

Variants

size

default(default)32px — toolbar, list rows.
sm24px — comment threads, dense tables.
lg40px — profile cards, account menus.

Anatomy

AvatarRound container. Sets size and the masked border ring.
AvatarImageImage source. If it fails to load, the fallback renders.
AvatarFallbackShown while the image loads or if it fails — initials, an icon, or a coloured square.

Guidelines

Always render an AvatarFallback — even when you're sure the image will load.Network failures happen; without a fallback the avatar collapses to a transparent circle.
Use `<img className="rounded-full">` instead of Avatar.You lose the masked border + fallback handling that make avatars look correct in both themes.
Use the `getInitials` helper from @8maverik8/design for fallback text.