Component

Avatar

A rounded-square avatar with initials fallback and optional presence status.

Preview

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Avatar } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/avatar.json

Copied source import

code

import "@/styles/axie.css";import { Avatar } from "@/components/axie/avatar";

Prefer @axie/avatar? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Avatar } from "axie-ui";export function Example() {  return <Avatar fallback="Alexi" status="online" />;}

Accessibility

Use meaningful alt text when the avatar is an image of a person.
Initials fallback should match the visible account or person name.
Do not use presence color alone without supporting text nearby.

API Reference

Prop	Type	Default	Description
size	sm \| md \| lg	md	Controls the avatar square size.
src	string	-	Image source. Falls back to initials when omitted.
alt	string	-	Accessible image label and fallback source text.
status	online \| busy \| offline	-	Optional presence dot.