Avatar
User profile image with initials fallback, colourful mesh background, and 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.
SD
BC
Default
Auto-generates initials and a hashed mesh-gradient background from the name.
OM
JL
IN
Size
The avatar scales to its box, so set the dimensions with a size utility class.
OM
OM
OM
OM
OM
With image
Pass a profile_image map keyed by size (sm, md, lg).
Status indicator
Add a coloured dot for presence or status.
JL
JL
JL
JL
Rounding
circle for full round, rounded prop for any Tailwind rounded class.
IN
IN
IN
IN
Account menu
Wrap the avatar in a DropdownMenuTrigger to open an account menu aligned to its end.