A React avatar component - photo, initials or silhouette, with an optional presence dot. For profiles and lists.
Avatar playground
Install Avatar
1. New project? One command installs the package and wires everything - see Installation:
pnpm dlx zyncat-ui init2. Import the component - it loads its own stylesheet:
import { Avatar } from '@zyncat/ui/avatar';Usage
import { Avatar } from '@zyncat/ui/avatar'; <Avatar src="https://i.pravatar.cc/96?img=47" name="Ana Ng" status="online" size="lg" />Compose Avatar in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.
Avatar props
Avatar
Frequently asked questions
It falls back in order: your own icon node if you pass one, then initials computed from name, then a generic silhouette if neither is set. Passing src alone still falls back the same way if the image fails to load.
initials takes the first letter of the first and last words in name (just the first letter alone at size="xs"), uppercased. The background comes from one of six palette slots - blue, violet, plum, rose, clay, moss - hashed deterministically from name, or pin it yourself with paletteIndex (1-6); with neither name nor paletteIndex, it renders neutral.
Set status to "online", "away", "busy" or "offline" and a dot renders at the bottom-right corner, with role="img" and an aria-label matching the status. It is hidden by default.
Use AvatarGroup from @zyncat/ui/avatar-group - it clones each Avatar child to a uniform size, shows up to max of them (default 5), and renders the rest as a single "+N" chip.