Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add countdown

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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.

Basic Usage

hrs
:
min
:
sec 
<x-aura::countdown :seconds="3600" />
<x-aura::countdown :seconds="3600" />

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.

Variants / Examples

Countdown to Date

hrs
:
min
:
sec 
<x-aura::countdown target="2026-12-31T23:59:59" />
<x-aura::countdown target="2026-12-31T23:59:59" />

Countdown from Seconds

hrs
:
min
:
sec
hrs
:
min
:
sec
hrs
:
min
:
sec 
<div class="flex items-center gap-8">
    <x-aura::countdown :seconds="90" size="sm" />
    <x-aura::countdown :seconds="3661" size="md" />
    <x-aura::countdown :seconds="86400" size="lg" />
</div>
<x-aura::countdown :seconds="90" size="sm" />
<x-aura::countdown :seconds="3661" size="md" />
<x-aura::countdown :seconds="86400" size="lg" />

Without Labels

:
: 
<x-aura::countdown :seconds="7200" :labels="false" separator=" : " />
<x-aura::countdown :seconds="7200" :labels="false" separator=" : " />

Event Launch Timer

Event starts in

hrs
:
min
:
sec 
<div class="text-center">
    <p class="text-sm text-aura-surface-500 mb-4">Event starts in</p>
    <x-aura::countdown target="2026-06-15T09:00:00" size="lg" />
</div>
<div class="text-center">
    <p class="text-sm text-aura-surface-500 mb-4">Event starts in</p>
    <x-aura::countdown target="2026-06-15T09:00:00" size="lg" />
</div>

Accessibility

  • Each time unit has an aria-label describing its value (e.g., "12 hours").
  • The component uses role="timer" to indicate a live countdown region.
  • Labels provide a visual description of each unit, supplementing the numeric display.