Binhlaig UI Component

Avatar

A profile image component with fallback initials, sizes, status indicators and grouped layouts.

Installation

Initialize Binhlaig UI once, then install Avatar using the saved installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add avatar

Import Avatar primitives from your UI directory.

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
  AvatarStatus,
} from "@/components/ui/avatar"

Render the fallback first and place the image above it.

Fallback initials remain visible when the image is missing or fails to load.

Use sm, md, lg or xl depending on the layout.

SASASASA

Add a compact presence indicator.

SAonline

SAoffline

SAbusy

SAaway

Stack multiple avatars and display the remaining count.

SAMMTK+4

Style the fallback with ordinary utility classes.

SABLUI

Replace an older Avatar source with the latest registry version.

npx binhlaig-ui@latest add avatar --overwrite

Main components and custom props available in Binhlaig UI Avatar.

Component	Purpose
`Avatar`	Profile image container.
`AvatarImage`	Profile image with load failure handling.
`AvatarFallback`	Initials or fallback icon.
`AvatarStatus`	Presence indicator.
`AvatarGroup`	Overlapping avatar layout.
`AvatarGroupCount`	Remaining people count.

Prop	Values	Default
`size`	sm, md, lg, xl	`md`
`status`	online, offline, busy, away	`online`