Overview
UserAvatar wraps shadcn Avatar with user-specific functionality. It provides a consistent way to display user avatars with automatic initials fallback, status indicators, and click handling.
Key Features
- Five size variants: sm, md, default, lg, xl
- Status indicators (online, away, offline) with positioning
- Automatic fallback to initials when no image available
- Click handler for interactive avatars (user sheets, profile links)
Examples
Size Variants
All available size variants from small to extra-large.
SA
smSA
mdSA
defaultSA
lgSA
xlStatus Indicators
Status dots positioned at the bottom-right of the avatar.
SA
OnlineSA
AwaySA
OfflineWith Avatar Image
When avatarUrl is provided, the image is displayed. Otherwise, initials are generated from the user's name.
MC
With ImageSA
Fallback (Initials)Clickable Avatar
Click the avatar above to trigger an action. Useful for opening user sheets or profile pages.
SA
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
user | User | required | User object with fullName, email, and optional avatarUrl |
size | "sm" | "md" | "default" | "lg" | "xl" | "default" | Avatar size: sm (24px), md (32px), default (36px), lg (48px), xl (64px) |
status | "online" | "away" | "offline" | - | Status indicator: online, away, offline |
showStatus | boolean | false | Whether to display the status indicator dot |
onClick | () => void | - | Click handler for interactive avatars |
Usage
import { UserAvatar } from '@/ui/components';
const user = {
id: '1',
fullName: 'Sarah Anderson',
email: 'sarah@example.com',
avatarUrl: 'https://example.com/avatar.jpg', // optional
};
// Basic usage
<UserAvatar user={user} />
// With size and status
<UserAvatar
user={user}
size="lg"
status="online"
showStatus
/>
// Clickable for opening user sheets
<UserAvatar
user={user}
size="lg"
onClick={() => openUserSheet(user.id)}
/>