Murasaki
Components

Avatar

An image element with a fallback for representing the user.

MU

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@murasakijs/ui";
<Avatar>
  <AvatarImage src="https://avatars.githubusercontent.com/u/297658745?s=400" alt="Murasaki" />
  <AvatarFallback>MU</AvatarFallback>
</Avatar>

API Reference

Subcomponents

ComponentDescription
AvatarThe root container (fixed h-10 w-10 circle by default).
AvatarImageThe image; renders nothing until it loads successfully. Accepts src, alt, onLoadingStatusChange.
AvatarFallbackShown while the image is loading or if it fails to load. Accepts delayMs to defer rendering.

The image load state and fallback are managed by Murasaki without an external headless primitive.

Improve this page on GitHub

On this page