Display
Avatar
An avatar answers one question - whose is this - and it has to answer it at 20 pixels. Initials do that reliably where a photograph does not, so initials are the base state and a photo is an enhancement layered over them. The tint is computed from the name rather than passed in, which means one person is the same colour in every list in the app without anybody maintaining a mapping, and because it draws from the palette's identity tones, a custom theme restyles every avatar for free.
npx shadcn@latest add @minflow/avatarWhere to use it
- Assignees, authors, participants, and anywhere a name is repeated down a list.
- Stacked into a group when a row needs to show who is involved without spending a line on it.
- Not as decoration next to a name that is already spelled out in full - that is two of the same signal.
Variations
Sizes
Four sizes and no more. 20 and 24 are for inline and dense rows, 32 is the default, 40 is for a profile header.
Presence
When availability changes what someone will do next - assigning work, starting a call. Leave it off when presence is not actionable, because a permanent dot stops being read.
Group
Several people in the space of one. The stack opens on hover, so the overlap never permanently hides anybody, and the overflow collapses into a count.
With a photograph
When you actually have one. Initials stay underneath, so a slow or broken image degrades to a readable avatar rather than an empty hole.
AO