Avatar

An image element with a fallback for representing users.

Installation

tsx
npx @smicolon/smi-ui add avatar

Preview

John Doe
JS
AB

Sizes

X
S
M
L
X

With Images

User 1
User 2
User 3

Avatar Group

User 1
User 2
User 3
+2

Usage

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>