Data display

Avatar

Compound component: `Avatar` and `Avatar.Group`.

Server safeSource

Import

import { Avatar } from '@the_viveksingh/vivek-ui'

Photo, initials, and a photo that failed

src shows the picture; name supplies the initials that render when there is no src - and when the src fails to load, because a broken image icon is never the right avatar.

Aditi SharmaAditi Sharma

With a photo, without one, and with one that failed to load — the initials are the fallback in both of the last two.

<Avatar name="Aditi Sharma" src="/team/aditi.jpg" size="lg" />
<Avatar name="Aditi Sharma" size="lg" />
<Avatar name="Aditi Sharma" src="/does-not-exist.jpg" size="lg" />

Sizes

With no src the initials are derived from name, so a missing image is never a blank circle.

<Avatar name="Vivek Kumar Singh" size="xs" />
<Avatar name="Vivek Kumar Singh" size="sm" />
<Avatar name="Vivek Kumar Singh" size="md" />
<Avatar name="Vivek Kumar Singh" size="lg" />
<Avatar name="Vivek Kumar Singh" size="xl" />

Shapes

Vivek Kumar SinghVivek Kumar Singh
<Avatar name="Vivek Kumar Singh" shape="circle" />
<Avatar name="Vivek Kumar Singh" shape="square" />

Overlapping group

A trailing count is just another Avatar with an explicit fallback.

Vivek Kumar SinghAditi SharmaRahul Verma
<Avatar.Group>
  <Avatar name="Vivek Kumar Singh" />
  <Avatar name="Aditi Sharma" />
  <Avatar name="Rahul Verma" />
  <Avatar fallback="+4" />
</Avatar.Group>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Avatar
PropTypeDefaultDescription
srcstring—Image URL. When absent (or it fails to load) the fallback shows instead.
namestring—Describes the person. Also seeds the initials fallback.
size'xs' | 'sm' | 'md' | 'lg' | 'xl'——
shape'circle' | 'square'——
fallbackstring—Overrides the derived initials.
imgPropsImgHTMLAttributes<HTMLImageElement>——

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Avatar carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.