Skip to main content
The User Avatar component displays a user’s profile picture with an optional name. Commonly used in Filament tables and user-related interfaces.

​
Preview

John DoeJohn Doe
Jane Smith

​
Usage

<x-shopper::user-avatar :user="$customer" />

​
Props

​
user
Model
required
The user model instance. Must have picture and full_name attributes.
​
showName
bool
default:"true"
Whether to display the user’s name next to the avatar.

​
Examples

​
With Name

John DoeJohn Doe
<x-shopper::user-avatar :user="$user" />

​
Avatar Only

Jane Smith
<x-shopper::user-avatar :user="$user" :showName="false" />

​
In a Filament Table

Tables\Columns\ViewColumn::make('customer')
    ->view('shopper::components.user-avatar')
    ->label(__('Customer')),

​
User Model Requirements

The user model must implement: 
// Profile picture URL
public function getPictureAttribute(): string;

// Full name display
public function getFullNameAttribute(): string;

​
Blade Component Source

@props([
    'user',
    'showName' => true,
])

<div class="flex items-center gap-2">
    <img
        class="size-8 rounded-full"
        src="{{ $user->picture }}"
        alt="{{ $user->full_name }}"
    />

    @if ($showName)
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
            {{ $user->full_name }}
        </span>
    @endif
</div>