Avatar

A user avatar component for Laravel applications. Displays profile images or generates initials fallbacks with optional status indicators. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/avatar

Livewire Usage

With Image

<livewire:sb-avatar src="/images/user.jpg" alt="John Doe" />

With Initials Fallback

<livewire:sb-avatar name="John Doe" />
<!-- Displays "JD" -->

Different Sizes

<livewire:sb-avatar name="User" size="xs" />
<livewire:sb-avatar name="User" size="sm" />
<livewire:sb-avatar name="User" size="md" />
<livewire:sb-avatar name="User" size="lg" />
<livewire:sb-avatar name="User" size="xl" />

With Status Indicator

<livewire:sb-avatar name="John" status="online" />
<livewire:sb-avatar name="Jane" status="offline" />
<livewire:sb-avatar name="Bob" status="busy" />
<livewire:sb-avatar name="Alice" status="away" />

Square Avatar

<livewire:sb-avatar name="John Doe" :rounded="false" />

Livewire Props

Vue 3 Usage

Setup

import { SbAvatar } from './vendor/sb-avatar';
app.component('SbAvatar', SbAvatar);

Basic Usage

<template>
  <!-- With image -->
  <SbAvatar src="/images/user.jpg" alt="John Doe" />

  <!-- With initials fallback -->
  <SbAvatar name="John Doe" />
</template>

Sizes

<template>
  <SbAvatar name="User" size="xs" />  <!-- 24px -->
  <SbAvatar name="User" size="sm" />  <!-- 32px -->
  <SbAvatar name="User" size="md" />  <!-- 40px -->
  <SbAvatar name="User" size="lg" />  <!-- 48px -->
  <SbAvatar name="User" size="xl" />  <!-- 64px -->
</template>

With Status

<template>
  <SbAvatar name="John" status="online" />   <!-- Green dot -->
  <SbAvatar name="Jane" status="offline" />  <!-- Gray dot -->
  <SbAvatar name="Bob" status="busy" />      <!-- Red dot -->
  <SbAvatar name="Alice" status="away" />    <!-- Yellow dot -->
</template>

User List Example

<template>
  <div class="flex -space-x-2">
    <SbAvatar
      v-for="user in users"
      :key="user.id"
      :src="user.avatar"
      :name="user.name"
      size="sm"
      class="ring-2 ring-white"
    />
  </div>
</template>

Vue Props

Sizes Reference

Status Colors

Features

• Image Support: Display user photos
• Initials Fallback: Auto-generates initials from name
• Status Indicator: Small dot showing user status
• Multiple Sizes: 5 preset sizes
• Shape Options: Circular or rounded square

Styling

Uses Tailwind CSS:

• Gray background for initials
• Object-cover for images
• Status dot positioned bottom-right
• White border on status indicator

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License