Laravel Countdown Component
Free · MITA countdown timer component that counts down to a target date or from a specified number of seconds.
A Countdown built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::countdown>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::countdown :seconds="3600" />See the full API, props and live examples in the Countdown documentation.
Overview
The <x-aura::countdown> component renders a countdown timer that ticks down in real time. It can count down to a specific datetime or from a given number of seconds. The display supports configurable sizes, custom separators, and optional text labels for each time unit.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
target |
string|null |
null |
Target datetime string (ISO 8601 format, e.g., 2026-12-31T23:59:59). |
seconds |
int|null |
null |
Number of seconds to count down from. Used when target is not set. |
size |
string |
'md' |
Display size: sm, md, lg. |
separator |
string |
':' |
Character displayed between time units. |
labels |
bool |
true |
Show text labels (Days, Hours, Minutes, Seconds) below each unit. |
See more examples and every variant in the Countdown documentation.