Data display

Avatar

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

Server safeSource

Import

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

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

<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.

<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
Prop	Type	Default	Description
`src`	`string`	—	Image URL. When absent (or it fails to load) the fallback shows instead.
`name`	`string`	—	Describes the person. Also seeds the initials fallback.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	—	—
`shape`	`'circle' \| 'square'`	—	—
`fallback`	`string`	—	Overrides the derived initials.
`imgProps`	`ImgHTMLAttributes<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.