Avatar

User avatar image with automatic initial-letter fallback built on Radix Avatar primitive.

// Radix — @radix-ui/react-avatar
import { Avatar } from "@shavin/ui";

Image with Fallback

Renders a profile picture with automatic graceful fallback to initials if the image fails to load or while loading.

<Avatar
  src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1287&auto=format&fit=crop&q=80"
  alt="Kavya Sharma"
  fallback="KS"
  size="lg"
/>
<Avatar
  src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80"
  alt="Elena Rostova"
  fallback="ER"
  size="lg"
/>
<Avatar
  src="https://images.unsplash.com/photo-1711024585660-48ea7317d1a9?q=80&w=1287&auto=format&fit=crop&q=80"
  alt="Marcus Chen"
  fallback="MC"
  size="lg"
/>
<Avatar
  src="https://broken-image-url.example/404.jpg"
  alt="Grace Hopper"
  fallback="GH"
  size="lg"
/>

Sizes (with image & fallback)

<Avatar size="sm" src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80" fallback="K" />
<Avatar size="md" src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80" fallback="K" />
<Avatar size="lg" src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80" fallback="K" />
<Avatar size="xl" src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80" fallback="K" />

Fallback text

<Avatar size="md" fallback="J" />
<Avatar size="md" fallback="AB" />
<Avatar size="md" fallback="?" />

Radius override — default is always "full", regardless of the Configurator

Explicit values (none/small/medium/large/full) are fixed regardless of the Configurator's Radius control — an avatar shouldn't go square just because "none" was picked globally. Only radius="inherit" (rightmost, "I") follows that shared setting — try changing Radius in the Configurator and watch only that one move.

{/* explicit values are fixed regardless of the Configurator's Radius control */}
<Avatar size="lg" fallback="N" radius="none" />
<Avatar size="lg" fallback="F" radius="full" />
{/* only radius="inherit" follows the shared Radius setting */}
<Avatar size="lg" fallback="I" radius="inherit" />

Props

Prop	Type	Default
src	string	—
alt	string	—
fallback	React.ReactNode	—
fallbackIcon	React.ReactNode	—
className	string	—
size	"sm" \| "md" \| "lg" \| "xl"	"md"
radius	"none" \| "small" \| "medium" \| "large" \| "full" \| "inherit"	"full"