Avatar

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

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.