Avatar

Display user profile images with fallback initials, status indicators, and grouping support.

Installation

You can add this component using our CLI or manually:

$npx omnira-ui@latest add avatar

Sizes

Six sizes from xs (24px) to 2xl (72px).

Sizes

User
User
User
User
User
User

Fallback

When no image is provided, initials from alt text or a custom fallback are shown.

Fallback

OR
JD
?

Shapes

Circle (default) and rounded square shapes.

Shapes

Circle
Rounded

Status Indicator

Show online, away, busy, or offline status with a colored dot.

Status

Online
Away
Busy
Offline

Avatar Group

Stack avatars with overlap. Use max to limit visible count with a +N overflow.

Group

User 1
User 2
User 3
User 4
User 1
User 2
User 3
+2

Usage

Import Avatar and AvatarGroup.

tsx
import { Avatar, AvatarGroup } from "@/components/ui/Avatar";

// Basic
<Avatar src="/avatar.jpg" alt="Olivia Rhye" size="md" />

// Fallback
<Avatar alt="Olivia Rhye" size="md" />

// Status
<Avatar src="/avatar.jpg" size="lg" status="online" />

// Group with overflow
<AvatarGroup size="md" max={3}>
    <Avatar src="/a1.jpg" size="md" />
    <Avatar src="/a2.jpg" size="md" />
    <Avatar src="/a3.jpg" size="md" />
    <Avatar src="/a4.jpg" size="md" />
</AvatarGroup>

Avatar Props

Props

PropTypeDefaultDescription
srcstring—Image URL.
altstring—Alt text (also used for initials fallback).
fallbackstring—Custom fallback text (overrides initials).
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl""md"Avatar size.
shape"circle" | "rounded""circle"Avatar shape.
status"online" | "offline" | "away" | "busy"—Status indicator dot.

AvatarGroup Props

Props

PropTypeDefaultDescription
maxnumber—Max visible avatars. Overflow shows +N.
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl""md"Size for overflow indicator.