BlatUI

Components

Avatar

An image element with a fallback for representing the user.

php artisan blatui:add avatar
@shadcn CN 
<x-ui.avatar>
    <x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
    <x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>

Group

@shadcn CN @leerob LR @evilrabbit ER 
<div class="flex -space-x-2 *:ring-background *:ring-2">
    <x-ui.avatar>
        <x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
        <x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
    </x-ui.avatar>
    <x-ui.avatar>
        <x-ui.avatar-image src="https://github.com/leerob.png" alt="@leerob" />
        <x-ui.avatar-fallback>LR</x-ui.avatar-fallback>
    </x-ui.avatar>
    <x-ui.avatar>
        <x-ui.avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <x-ui.avatar-fallback>ER</x-ui.avatar-fallback>
    </x-ui.avatar>
</div>