Laravel Ticker Component

Free · MIT

A figure that counts up when it scrolls into view, and is correct before it does.

A Ticker built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::ticker>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<div class="flex gap-10 text-3xl font-extrabold">
    <x-aura::ticker :value="1250" suffix="+" label="Tests passing" />
    <x-aura::ticker :value="135" label="Components" />
    <x-aura::ticker :value="99.9" :decimals="1" suffix="%" label="Uptime" />
</div>

See the full API, props and live examples in the Ticker documentation.

Overview

<x-aura::ticker> animates a number upward the first time it becomes visible.

Props

Prop	Type	Default	Description
`value`	`int\|float`	`0`	The final figure.
`from`	`int\|float`	`0`	Where the count starts.
`duration`	`int`	`1200`	Milliseconds.
`prefix`	`string\|null`	`null`	e.g. `€`.
`suffix`	`string\|null`	`null`	e.g. `+` or `%`.
`decimals`	`int`	`0`	Decimal places.
`label`	`string\|null`	`null`	What the figure is. Goes into the accessible name.