Avatar

User images that fade in once loaded, with initials fallback, presence status and stacked groups.

LMNKSO

Playground

Tweak the props, the preview and the code follow.

Props

size

status

group

group max4

<Avatar size="lg">
  <AvatarImage src="/lea.png" alt="Léa" />
  <AvatarFallback>LM</AvatarFallback>
  <AvatarStatus status="online" />
</Avatar>

npx @plumsydev/plum-ui add avatar

import { Avatar, AvatarFallback, AvatarImage, avatarGradient } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src="/avatar.png" alt="Léa Martin" />
  <AvatarFallback>LM</AvatarFallback>
</Avatar>

Hover the stack — it fans out. max collapses the rest into a counter.

ARJBMCTD

Hover the group to fan it out

ACACACACAC

avatarGradient(seed) returns a unique, stable gradient as a data URI — no network request.

Léa Martin

lea@acme.com

Owner

Noah Kim

noah@acme.com

Admin

Ines Duarte

ines@acme.com

Member

Prop	Type	Default
`size` Diameter, from 24 to 64px.	`"xs" \| "sm" \| "default" \| "lg" \| "xl"`	`"default"`

Prop	Type	Default
`delayMs` Wait before showing the fallback, avoids a flash on fast connections.	`number`	`—`

Prop	Type	Default
`status` Presence dot color.	`"online" \| "busy" \| "away" \| "offline"`	`"online"`

Prop	Type	Default
`max` Maximum avatars shown before a +N counter.	`number`	`—`

avatarGradient(seed: string) generates a placeholder image from any string, ideal for users without a photo.
AvatarStatus sits outside the clipped circle — add overflow-visible to the Avatar and rounded-full to the image.