Components

Stat

A KPI metric card with a label, big value, trend arrow with change, optional icon and inline sparkline.

php artisan blatui:add stat

Total Revenue

$45,231.89

<x-ui.stat label="Total Revenue" value="$45,231.89" icon="dollar-sign" class="max-w-xs" />

Grid

Revenue

$45.2k

+12.5% vs last month

Orders

1,204

+5.4% vs last month

Refunds

-2.1% vs last month

Conversion

3.6%

0.0% flat

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <x-ui.stat
        label="Revenue"
        value="$45.2k"
        change="+12.5%"
        caption="vs last month"
        icon="dollar-sign"
    />
    <x-ui.stat
        label="Orders"
        value="1,204"
        change="+5.4%"
        caption="vs last month"
        icon="shopping-cart"
    />
    <x-ui.stat
        label="Refunds"
        value="32"
        change="-2.1%"
        caption="vs last month"
        icon="rotate-ccw"
    />
    <x-ui.stat
        label="Conversion"
        value="3.6%"
        trend="neutral"
        change="0.0%"
        caption="flat"
        icon="target"
    />
</div>

With Sparkline

Active Sessions

8,492

+18.7% this week

<x-ui.stat
    label="Active Sessions"
    value="8,492"
    change="+18.7%"
    caption="this week"
    :series="[12, 18, 14, 22, 19, 27, 24, 31, 28, 35]"
    class="max-w-sm"
/>

With Trend

New Customers

1,204

+12.5% vs last month

Churn Rate

2.1%

-3.2% vs last month

<div class="grid gap-4 sm:grid-cols-2">
    <x-ui.stat
        label="New Customers"
        value="1,204"
        change="+12.5%"
        caption="vs last month"
        icon="users"
    />
    <x-ui.stat
        label="Churn Rate"
        value="2.1%"
        change="-3.2%"
        caption="vs last month"
        icon="user-minus"
    />
</div>