User profiles, team rosters, comment threads, and activity feeds all need a circular image container with fallback initials and an optional online-status badge—but building it from scratch means repeating border-radius, sizing logic, dark-mode tokens, and status-color mappings across every page. Without a standard, you end up with five different avatar implementations that drift when the design changes.

Avatar is a controlled Tailwind v4 component with five size variants (xs, sm, md, lg, xl), an optional image via src, fallback text when no image is supplied, and a status prop that adds an online-status indicator (online, offline, busy, away) positioned at the bottom-right. It exposes a stable data-react-fancy-avatar attribute for agent selection and dark-mode variants baked into all tokens.

Import from @particle-academy/react-fancy, render <Avatar src="https://…" alt="Name" size="md" status="online" />, or use <Avatar fallback="JD" size="sm" /> when no image is available. Pass className to customize the container further.