blatui

Components

Number Ticker

A number that animates counting up to its target when it scrolls into view.

php artisan blatui:add number-ticker
1,284 
{{-- Counts up to the target the first time it scrolls into view. --}}
<div class="text-4xl font-semibold">
    <x-ui.number-ticker :value="1284" />
</div>

Decimals

99.9% 
{{-- Fixed decimal places with a suffix — handy for percentages and rates. --}}
<div class="text-4xl font-semibold text-emerald-500">
    <x-ui.number-ticker :value="99.9" :decimals="1" suffix="%" />
</div>

Grid

Total users 48,213
Monthly revenue $92,480
Uptime 99.98% 
{{-- Three tickers laid out as a stats row — each animates in on scroll. --}}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
    <div class="flex flex-col gap-1 rounded-lg border p-6">
        <span class="text-muted-foreground text-sm">Total users</span>
        <span class="text-3xl font-semibold">
            <x-ui.number-ticker :value="48213" />
        </span>
    </div>
    <div class="flex flex-col gap-1 rounded-lg border p-6">
        <span class="text-muted-foreground text-sm">Monthly revenue</span>
        <span class="text-3xl font-semibold">
            <x-ui.number-ticker :value="92480" prefix="$" />
        </span>
    </div>
    <div class="flex flex-col gap-1 rounded-lg border p-6">
        <span class="text-muted-foreground text-sm">Uptime</span>
        <span class="text-3xl font-semibold text-emerald-500">
            <x-ui.number-ticker :value="99.98" :decimals="2" suffix="%" />
        </span>
    </div>
</div>

Prefix

$1,284,930 
{{-- A currency prefix on a large value, with thousands separators. --}}
<div class="text-5xl font-bold tracking-tight">
    <x-ui.number-ticker :value="1284930" prefix="$" />
</div>

API Reference

Props, slots and exposed methods for <x-ui.number-ticker>.

Props

Prop Type Default Description
value* number 0 The target number to count up to. Counting starts the first time the element scrolls into view.
from number 0 The starting number the count animates up (or down) from.
duration int 1500 The count animation length in milliseconds. Set to 0 to show the final value immediately.
decimals int 0 How many decimal places to display.
prefix string '' Text shown before the number (e.g. a currency symbol).
suffix string '' Text shown after the number (e.g. "%" or "+").
separator string ',' The thousands separator inserted into the integer part.

* Required.