blatui

Components

Presence

An online / away / busy / offline status dot, optionally pinned to an avatar.

php artisan blatui:add presence
Online Away Busy Offline 
<div class="flex flex-wrap items-center gap-6">
    <x-ui.presence status="online" show-label />
    <x-ui.presence status="away" show-label />
    <x-ui.presence status="busy" show-label />
    <x-ui.presence status="offline" show-label />
</div>

On Avatar

@shadcn CN Online 
{{-- The presence dot composes onto an avatar corner via a relative wrapper. --}}
<div class="relative inline-flex">
    <x-ui.avatar class="size-12">
        <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.presence status="online" class="absolute end-0 bottom-0" />
</div>

Pulse

Online 
<x-ui.presence status="online" :pulse="true" show-label />