Avatar

An image element with a fallback for representing users.

التثبيت

tsx
npx @smicolon/fasla-ui add avatar

معاينة

John Doe
JS
AB

المقاسات

X
S
M
L
X

With Images

User 1
User 2
User 3

Avatar Group

User 1
User 2
User 3
+2

الاستخدام

tsx
import { Avatar, AvatarGroup } from "@/components/ui/avatar"

// Basic avatar with image
<Avatar
  src="/path/to/image.jpg"
  alt="John Doe"
/>

// Avatar with fallback initials
<Avatar alt="John Doe" />

// Avatar group
<AvatarGroup max={3}>
  <Avatar src="/user1.jpg" alt="User 1" />
  <Avatar src="/user2.jpg" alt="User 2" />
  <Avatar src="/user3.jpg" alt="User 3" />
</AvatarGroup>