Avatar

Avatar components are used to represent a user and can display images, initials, or fallback icons.

Installation

Add the avatar component to your project:

npx velyx@latest add avatar

pnpm dlx velyx@latest add avatar

yarn dlx velyx@latest add avatar

bunx --bun velyx@latest add avatar

Usage

Default Avatar

<x-ui.avatar
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
    />

Sizes

<x-ui.avatar
        size="xs"
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
    />

<x-ui.avatar
        size="sm"
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
    />

<x-ui.avatar
        size="md"
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
    />

<x-ui.avatar
        size="lg"
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
    />

<x-ui.avatar
        size="xl"
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
    />

With Status

<x-ui.avatar
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
        status="online"
    />

<x-ui.avatar
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
        status="offline"
    />

<x-ui.avatar
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
        status="busy"
    />

<x-ui.avatar
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
        status="away"
    />

Shapes

<x-ui.avatar
        shape="circle"
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
    />

<x-ui.avatar
        shape="square"
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
    />

Fallback

<x-ui.avatar
        name="John Doe"
        fallback-icon="user"
    />

Props

Examples

Avatar Group

<div class="flex -space-x-2">
    <x-ui.avatar
        src="https://i.pravatar.cc/128?img=1"
        name="Alice"
        size="sm"
    />
    <x-ui.avatar
        src="https://i.pravatar.cc/128?img=2"
        name="Bob"
        size="sm"
    />
    <x-ui.avatar
        src="https://i.pravatar.cc/128?img=3"
        name="Charlie"
        size="sm"
    />
    <x-ui.avatar
        name="+5"
        size="sm"
        fallback-icon="plus"
    />
</div>

User Profile Card

<div class="flex items-center gap-4 p-4 border rounded-lg">
    <x-ui.avatar
        src="https://i.pravatar.cc/128?img=12"
        name="Jane Cooper"
        size="lg"
        status="online"
    />

    <div>
        <p class="font-medium">Jane Cooper</p>
        <p class="text-sm text-muted-foreground">Product Designer</p>
    </div>
</div>

With Initials

<x-ui.avatar
    name="Jane Cooper"
    fallback-icon="user"
    size="xl"
/>

Accessibility

Avatar components include proper ARIA attributes:

• Alt text generated from the name prop
• Proper semantic HTML structure
• Status indicators with ARIA labels

Customization

The avatar component uses Tailwind CSS classes. You can customize the appearance by modifying the component in your project:

@

@props([
    'src' => null,
    'name' => null,
    'size' => 'xl',
    'shape' => 'circle',
    'status' => null,
    'fallbackIcon' => 'user',
])

// Customize sizes, colors, and styles here

Size Customization

The avatar supports the following sizes:

• xs: 24px
• sm: 32px
• md: 40px
• lg: 48px
• xl: 56px

Status Colors

• online: Green
• offline: Gray
• busy: Red
• away: Yellow

Next Steps

• Explore Avatar Group component
• Learn about Badge component
• View Card component