Skip to main content

Usage

import { Avatar } from '@kivora/react';

<Avatar src="/user.jpg" alt="Alice Johnson" />

Examples

With Image

<Avatar src="/user.jpg" alt="Alice Johnson" size="md" />

Initials Fallback

<Avatar alt="Bob Smith" size="lg" />
When no image is provided or the image fails to load, Avatar automatically displays initials derived from the alt prop (first letters of first two words).

Custom Initials

<Avatar alt="Alice Johnson" initials="AJ" size="md" />

Sizes

<Avatar alt="User" size="sm" />

Props

src
string
Avatar image URL
alt
string
required
Alt text for the image, also used to derive initials
initials
string
Custom initials to display (overrides automatic derivation from alt)
size
'sm' | 'md' | 'lg' | 'xl'
default:"md"
Avatar size
className
string
Additional CSS classes

Accessibility

  • Avatar uses role="img" and aria-label for screen readers
  • The alt prop is required and used for accessibility
  • Images include proper alt text
  • Initials provide a meaningful fallback when images fail

Build docs developers (and LLMs) love