Profile Avatar

A rounded avatar component with gradient rings, status indicators, and fallback support.

Preview

Usage

import { ProfileAvatar } from "@/components/profile"

<ProfileAvatar
  src="/avatar.jpg"
  alt="User name"
  size="lg"
  ring="gradient"
  status="online"
/>

Sizes

<ProfileAvatar size="sm" /> // 32px
<ProfileAvatar size="md" /> // 48px
<ProfileAvatar size="lg" /> // 64px
<ProfileAvatar size="xl" /> // 96px

Ring Styles

none

gradient

white

primary

<ProfileAvatar ring="none" />
<ProfileAvatar ring="gradient" />  // Pink to sky gradient
<ProfileAvatar ring="white" />     // White ring
<ProfileAvatar ring="primary" />   // Theme primary color

Status Indicators

online

offline

away

busy

<ProfileAvatar status="online" />  // Green dot
<ProfileAvatar status="offline" /> // Gray dot
<ProfileAvatar status="away" />    // Yellow dot
<ProfileAvatar status="busy" />    // Red dot

Fallback

Show initials when the image fails to load.

<ProfileAvatar 
  src="/missing-image.jpg" 
  fallback="SC"
/>

Props

Prop	Type	Default	Description
src	string	-	Image source URL
alt	string	"Avatar"	Alt text for accessibility
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Avatar size
ring	"none" \| "gradient" \| "white" \| "primary"	"none"	Ring style around avatar
status	"online" \| "offline" \| "away" \| "busy"	-	Status indicator
fallback	string	-	Initials to show if image fails
className	string	-	Additional CSS classes