Skip to main content
WireKit

Live KPI Strip

Tickers are the right primitive for a "live data" header — denser than stat cards, designed for quick scanning. Pair them with Livewire's wire:poll for periodic auto-refresh.

Recipe

Live KPI ticker strip — wire:poll.1s in action
Today $3,124 +8.4%
MTD $48,295 +12.5%
AOV $141.22 +3.8%
Live Visitors 287
Cart Abandonment 58% -1.2% 
{{-- align="start" keeps tickers top-aligned when some have trend sparklines --}}
{{-- and others don't — without it, shorter tickers vertically center against taller siblings. --}}
<div wire:poll.30s="refreshKpis">
    <x-wirekit::row gap="md" :wrap="true" align="start">
        @foreach($kpis as $kpi)
            <x-wirekit::ticker
                :label="$kpi['label']"
                :value="$kpi['value']"
                :delta="$kpi['delta']"
                :trend="$kpi['trend']"
                :intent="$kpi['intent']"
                size="sm"
            />
        @endforeach
    </x-wirekit::row>
</div>
// Livewire component
public array $kpis = [];

public function mount(): void
{
    $this->refreshKpis();
}

public function refreshKpis(): void
{
    $this->kpis = [
        ['label' => 'Today', 'value' => '$' . number_format($this->todayRevenue()), 'delta' => '+8.4', 'trend' => 'up', 'intent' => 'success'],
        ['label' => 'MTD', 'value' => '$' . number_format($this->mtdRevenue()), 'delta' => '+12.5', 'trend' => 'up', 'intent' => 'success'],
        ['label' => 'AOV', 'value' => '$' . number_format($this->aov(), 2), 'delta' => '+3.8', 'trend' => 'up', 'intent' => null],
        ['label' => 'Live Visitors', 'value' => (string) $this->liveVisitors(), 'delta' => null, 'trend' => null, 'intent' => null],
    ];
}

Heads up — the preview above is real: it's a Livewire component with wire:poll.1s, jittering its dummy values every second so you can see the strip update without leaving the page open. Production cadence is almost always slower — the Show Code panel above carries the canonical .30s baseline for marketing dashboards. The Variations section below lists faster / slower presets for trading or analytics workloads.

Variations

  • Polling interval: Change wire:poll.30s to match data freshness needs (.5s for trading dashboards, .5m for marketing analytics).
  • Pause when hidden: Wrap with Alpine + IntersectionObserver to skip polling when the strip scrolls out of view — saves backend cycles on long pages.
  • Sparkline overlay: For high-attention metrics, swap one or two tickers for <x-wirekit::stat> cards with sparkline slots (see Stat with Sparkline).

Components Used

  • Ticker — label, value, delta, trend, intent, size
  • Row — flex container with wrap

See Also