Avatar

A circular user image or initials fallback with Alixan UI sizing and card colors.

Installation

npx alixan-ui-nuxt add avatar

Usage

<div class="flex items-center gap-3">
  <Avatar name="Alixan UI" size="sm" />
  <Avatar name="Alixan UI" />
  <Avatar name="Alixan UI" size="lg" />
  <Avatar name="Alixan UI" img="/examples/contact-avatar.webp" size="lg" />
</div>

API Reference

Prop	Type	Default	Description
name	string	''	User name used to generate initials when no image is provided.
img	string	-	Optional avatar image URL. When provided, the image is displayed instead of initials.
alt	string	-	Accessible image description. The name is used by default.
size	'sm' \| 'md' \| 'lg'	'md'	Controls the avatar diameter and fallback text size.