blatui

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
Increase: +12.5% vs last month
Orders
1,204
Increase: +5.4% vs last month
Refunds
32
Decrease: -2.1% vs last month
Conversion
3.6%
No change: 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
Increase: +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
Increase: +12.5% vs last month
Churn Rate
2.1%
Decrease: -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>

API Reference

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

Props

Prop Type Default Description
label string — The metric name shown in the top row (e.g. "Active Sessions").
value string — The big KPI value. Falls back to the default slot when not set.
change string — The change text, e.g. "+12.5%" or "-3.2%". A leading +/- infers the trend direction when trend is not given.
trend string — Direction of the change, controlling the icon and color. Inferred from the leading sign in change when omitted.
up down neutral
icon string — A lucide icon name (e.g. "dollar-sign") rendered in a muted tile next to the label.
caption string — Small muted caption shown next to the change, e.g. "vs last month".
series array — An array of numbers rendered as a corner sparkline (x-ui.sparkline), tinted to match the trend color.

Slots

Slot Description
default Custom KPI value markup, used when the value prop is not set.
leading Custom content for the icon tile next to the label (overrides the icon prop).
trailing Custom content in the top-right corner, shown when no series sparkline is provided.