Components
Countdown
A live countdown to a target date — days, hours, minutes and seconds, with an expired state.
php artisan blatui:add countdown
Expired
00
Days
00
Hrs
00
Min
00
Sec
<x-ui.countdown :to="now()->addDays(12)->addHours(7)->addMinutes(32)->addSeconds(8)" />Expired
The sale has ended — see you next time.
00
Days
00
Hrs
00
Min
00
Sec
<x-ui.countdown :to="now()->subMinutes(5)">The sale has ended — see you next time.</x-ui.countdown>API Reference
Props, slots and exposed methods for
<x-ui.countdown>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
to* |
string
|
— | The target date/time to count down to. Anything Carbon can parse (e.g. "2026-12-31 18:00" or now()->addDays(7)). Resolved to a millisecond epoch on the server so the countdown is timezone-safe. |
expired |
string
|
'Expired'
|
Text shown once the target has passed. Overridden by the default slot when one is provided. |
labels |
array
|
['days' => 'Days', 'hours' => 'Hrs', 'minutes' => 'Min', 'seconds' => 'Sec']
|
The unit captions under each number, keyed by days, hours, minutes and seconds. |
* Required.
Slots
| Slot | Description |
|---|---|
default |
Custom content shown when the countdown has expired, in place of the "expired" text. |