Avatar
An image element with a fallback for representing the user.
MU
import { Avatar, AvatarFallback, AvatarImage } from "@murasakijs/ui";export function AvatarDemo() {return ( <Avatar> <AvatarImage src="https://avatars.githubusercontent.com/u/297658745?s=400" alt="Murasaki" /> <AvatarFallback>MU</AvatarFallback> </Avatar>);}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
| Component | Description |
|---|---|
Avatar | The root container (fixed h-10 w-10 circle by default). |
AvatarImage | The image; renders nothing until it loads successfully. Accepts src, alt, onLoadingStatusChange. |
AvatarFallback | Shown while the image is loading or if it fails to load. Accepts delayMs to defer rendering. |
All subcomponents wrap Radix UI's Avatar
primitives and forward every other prop.