build69
Sign inGet API key
build69  /  Components  /  Data Display  /  Avatar

Avatar

v1.0.3Updated 20 Jul 2026

User or entity avatar with image + initials fallback. Use anywhere a person, team, or organisation needs an identity glyph. Adds hash-tinted initials, status dot, size + tone + ring variants, and an AvatarGroup with hori

View source← Back to catalog

Preview

Live · 17 stories
DefaultOpen ↗
▸Why this is recommendeduserprofileimageidentity+3

The default, out-of-the-box Avatar.

Recommended for+14
  • ✓Comment authors
  • ✓Team member rows
  • ✓Header user menus
  • ✓Team rosters
  • ✓Assignee pickers
  • ✓Online presence indicators
Tags+6
userprofileimageidentitygroupstatusdefault
Features+4
  • Image fallback to initials
  • Radix-driven loading state
  • Hash-tint initials fallback
  • Status dot (online / busy / away / offline)
  • Ring variant
  • Sizes xs / sm / md / lg / xl
  • AvatarGroup with overflow chip
  • Horizontal + vertical stacking
Not recommended for−2
  • ✕Decorative imagery (use plain img)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Avatar" })

Usage

import { Avatar, AvatarGroup } from '@/components/primitives/avatar';

<AvatarGroup max={3}>
  <Avatar name="Palakorn" status="online" />
  <Avatar name="Mali" />
  <Avatar name="Niran" />
  <Avatar name="Suda" />
</AvatarGroup>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
src

Image URL (passes through AvatarImage)

string—
name

Name used for initials + hash hue

string—
status

Status dot

'online' | 'busy' | 'away' | 'offline'—
size

Size preset

'xs' | 'sm' | 'md' | 'lg' | 'xl'—
ring

Ring outline

boolean—

Related

Platform docsAll componentsSource files