BaseAvatar

A circular avatar that derives initials from a full name string. Automatically assigns a consistent background color based on name hash — same name always gets the same color.

Basic Usage

Demo

AJ

BS

CW

DB

EM

<BaseAvatar name="Alice Johnson" />
<BaseAvatar name="Bob Smith" />
<BaseAvatar name="Dr. Carol Williams" />

Custom Size

Custom Size

AJ

AJ

AJ

<BaseAvatar name="Alice Johnson" size="w-12 h-12" text-class="text-lg font-bold" />

Props

Props

Prop	Type	Default	Description
name	string | null	'User'	Full name string. Derives initials (up to 2 chars). Strips common prefixes like Dr., Nurse, CFO.
size	string	'w-7 h-7'	Tailwind width/height classes for the avatar circle.
textClass	string	'text-xs font-bold'	Tailwind text classes applied to the initials text.

Notes

• Color is deterministic: the same name always produces the same background color.
• Strips "Dr.", "Nurse", "CFO", and "Supervisor" prefixes before computing initials.
• Null or empty name renders "US" (from the "User" fallback).