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
  ringColor="gradient"
  status="online"
/>

Sizes

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

Ring Styles

ring=false

ring=true

gradient

primary

pink

sky

mint

<ProfileAvatar ring={false} />
<ProfileAvatar ring ringColor="gradient" />
<ProfileAvatar ring ringColor="primary" />
<ProfileAvatar ring ringColor="pink" />

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 is missing or fails to load.

1 initial

2 initials

<ProfileAvatar 
  src="/missing-image.jpg" 
  fallback="S"   // 1 initial
/>

<ProfileAvatar 
  src="/missing-image.jpg" 
  fallback="JD"  // 2 initials
/>

Props

Prop	Type	Default	Description
src	string	-	Image source URL
alt	string	"Avatar"	Alt text for accessibility
fallback	string	-	Initials shown when image fails to load
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Avatar size
ring	boolean	true	Enable ring around avatar
ringColor	"primary" \| "pink" \| "sky" \| "mint" \| "gradient"	"gradient"	Ring color style
status	"online" \| "offline" \| "away" \| "busy"	-	Status indicator
className	string	-	Additional CSS classes