Avatar

User profile image component with status indicators

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 add avatar
pnpm dlx velyx add avatar
yarn dlx velyx add avatar
bunx --bun velyx add avatar

Usage

Default Avatar

Loading preview...

Failed to load preview

Code

Sizes

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

With Status

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

Shapes

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

Fallback

Loading preview...

Failed to load preview

Code

Props

Prop Type Default Description
src string null Image URL for the avatar
name string null User's name (used for initials and alt text)
size string 'xl' Size of the avatar: xs, sm, md, lg, xl
shape string 'circle' Shape of the avatar: circle or square
status string null Status indicator: online, offline, busy, away
fallbackIcon string 'user' Icon name to show when no image is provided

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