Component

Avatar

A profile image with a fallback for failed or absent images.

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add avatar

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Avatar, AvatarImage, AvatarFallback } from '@nimjs/ui';

export function Example() {
  return <Avatar aria-label="Ada Lovelace"><AvatarFallback>AL</AvatarFallback><AvatarImage src="/ada.jpg" alt="" /></Avatar>;
}

System metadata

Registry

avatar

Category: display

Status: preview

Version marker: 0.0.0 (unreleased)

Files

avatar.tsx

Tokens

mutedforeground

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

native semanticsscreen reader readable

Anatomy

Avatar

Avatar part of the avatar composition.

AvatarImage

AvatarImage part of the avatar composition.

AvatarFallback

AvatarFallback part of the avatar composition.

Usage patterns

basic use

Provide meaningful image alt text, or label the root when the image is decorative.

API and states

Avatar composes an image over fallback content. When the image fails to load, the fallback remains visible. Size the root with className.

Accessibility

If the image has meaningful alt text, use it as the name. If the image is decorative, set alt="" and give the root an accessible name. Fallback initials are hidden from assistive technology.