Avatar

PreviewCopy Anchor Link

UsageCopy Anchor Link

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from '@vitnode/core/components/ui/avatar'

<Avatar>
  <AvatarImage alt="Ada Lovelace" src={user.avatarUrl} />
  <AvatarFallback>AL</AvatarFallback>
</Avatar>

FallbackCopy Anchor Link

The fallback shows while the image loads and stays if it never arrives. Once loaded, the image fades in instead of popping.

SizesCopy Anchor Link

<Avatar size="sm" />
<Avatar />
<Avatar size="lg" />

BadgeCopy Anchor Link

AvatarBadge adds a status dot. Give it a semantic background:

<Avatar>
  <AvatarImage alt="Ada Lovelace" src={user.avatarUrl} />
  <AvatarFallback>AL</AvatarFallback>
  <AvatarBadge className="bg-success" />
</Avatar>

A dot alone doesn't tell everyone someone is online. Say it in text too, or give the badge an aria-label.

GroupCopy Anchor Link

AvatarGroup stacks avatars. Wrap each in AvatarGroupItem to lift it on hover and show a tooltip, and end with AvatarGroupCount:

import {
  AvatarGroup,
  AvatarGroupCount,
  AvatarGroupItem,
} from '@vitnode/core/components/ui/avatar'

<AvatarGroup>
  {users.map((user) => (
    <AvatarGroupItem key={user.id} label={user.name}>
      <Avatar>
        <AvatarImage alt={user.name} src={user.avatarUrl} />
        <AvatarFallback>{user.initials}</AvatarFallback>
      </Avatar>
    </AvatarGroupItem>
  ))}
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

The whole group shares one tooltip, so it glides from face to face. Plain Avatars inside a group make a quiet stack with no hover effect.

Member avatarsCopy Anchor Link

For VitNode users, reach for Avatar from @vitnode/core/components/avatar. It shows the stored picture, or the first letter of nameCode on the member's avatarColor in white.

import { Avatar } from '@vitnode/core/components/avatar'

<Avatar size={32} user={user} />

user needs name, nameCode, avatarColor (hex without #) and an optional avatarUrl. A broken avatarUrl falls back to the letter.

AccessibilityCopy Anchor Link

• Always pass alt to AvatarImage. The person's name is usually perfect.
• An AvatarGroupItem with a label is focusable, and its tooltip opens on focus as well as hover.
• With reduced motion, group avatars stay put and only the tooltip appears.

PropsCopy Anchor Link

AvatarCopy Anchor Link

AvatarGroupItemCopy Anchor Link

API ReferenceCopy Anchor Link

Base UI - Avatar