Avatar
User profile image with an initials fallback in one of two colour styles, and a status indicator. Pass a model object with name and optional profile_image to render.
Basic
Pass a model with a name; the avatar renders initials as a fallback.
Default
Auto-generates initials and a hashed mesh-gradient background from the name.
Variants
variant picks the look of the initials fallback: mesh (the default) or gel. Both take their hue from the name, so a person keeps the same colour in either style.
mesh is three radial blobs over a deep base. gel is a glossy app-icon tile rebuilt from the Iconly set: it reads best with rounded="rounded-[38%]", and its light rim softens in dark mode. In both, the initials are always white: a colourway too light for them is darkened just enough to keep 3:1 contrast. Every colour is written in OKLCH.
Gel colourways
Gel has thirteen colourways pinned to AVATAR_GEL_ANCHOR_HUES; any other hue blends the two nearest. Pass hue to pin a colour instead of hashing the name.
Size
The avatar scales to its box, so set the dimensions with a size utility class.
With image
Pass a profile_image map keyed by size (sm, md, lg).
Status indicator
Add a coloured dot for presence or status.
Rounding
circle for full round, rounded prop for any Tailwind rounded class.
Account menu
Wrap the avatar in a DropdownMenuTrigger to open an account menu aligned to its end.