Sigta UI · Kit

Inbox

Finishing something should feel finished. Tick an item: the box draws its tick, a burst flicks out, the title is crossed through, and the row slides aside while the list closes up. The count drops with a bump, a toast offers Undo, and the last one out gets confetti. This is a real Livewire component, so every step round-trips the server.

Inbox

4 open

  • Approve the Plumb onboarding copy

    Ida · Review · due today

  • Reply to Halyard about the routing console

    Mads · Client · 2h ago

  • Sign off the Q3 invoice run

    Finance · Approval · yesterday

  • Book the Marginalia launch call

    Sofie · Calendar · this week

The whole recipe

<ul data-sigta-motion id="inbox">          <!-- rows fold out / unfold in -->
    @foreach ($items as $item)
        <li wire:key="item-{{ $item->id }}">
            <sigta:checkbox x-on:change="$sigta.complete($el, () => $wire.complete({{ $item->id }}))" />
            <span data-sigta-strike>{{ $item->title }}</span>  <!-- crossed out when done -->
        </li>
    @endforeach
</ul>
<sigta:count :value="$items->count()" /> open

// in the component
Sigta::toast('Marked done', variant: 'success', action: ['text' => 'Undo', 'event' => 'item-reopen', 'detail' => ['id' => $id]]);
Sigta::celebrate('big', text: 'inbox zero!', target: '#inbox');