avatar

Avatar

A person's picture with initials or an icon as fallback and an optional status badge; a group overlaps several and shows how many more there are.

States: Default

Parts

Part	File	Does
Avatar	Avatar.vue	Groups the image, fallback and badge of an avatar.
AvatarBadge	AvatarBadge.vue	Shows a small status marker on the corner of the avatar.
AvatarFallback	AvatarFallback.vue	Shows initials or an icon when the avatar image is missing or fails to load.
AvatarGroup	AvatarGroup.vue	Stacks several avatars in an overlapping row.
AvatarGroupCount	AvatarGroupCount.vue	Shows how many more avatars the group holds than it displays.
AvatarImage	AvatarImage.vue	Shows the picture of the avatar.

Anatomy

<AvatarGroup>
  <Avatar>
    <AvatarImage />
    <AvatarFallback />
    <AvatarBadge />
  </Avatar>
  <AvatarGroupCount />
</AvatarGroup>

Styling

Part	Recipe
Avatar	avatar
Avatar	avatar-ring
AvatarBadge	avatar-badge
AvatarFallback	avatar-fallback
AvatarGroup	avatar-group
AvatarGroupCount	avatar-group-count
AvatarImage	avatar-image

Install

Writes 8 files into components/ui/avatar/. For agents, npx @frontic/ui docs avatar prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; class-variance-authority; reka-ui

API reference

Avatar Avatar.vue

Groups the image, fallback and badge of an avatar. Renders a <span>.

Prop	Type	Default
class	ClassValue	—

size	AvatarSize	—

Data attribute	Values
data-size	'md' \| 'sm' \| 'lg'

Recipe avatar	Sets
base: avatar	5 properties

size: sm	1 property

size: mddefault	1 property

size: lg	1 property

Recipe avatar-ring	Sets
base: avatar-ring	2 properties

Parts

Anatomy

Styling

Install

API reference

Avatar Avatar.vue

AvatarBadge AvatarBadge.vue

AvatarFallback AvatarFallback.vue

AvatarGroup AvatarGroup.vue

AvatarGroupCount AvatarGroupCount.vue

AvatarImage AvatarImage.vue