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>