A metric card for dashboards displaying analytics, financial data, or KPIs — with optional trend indicators, icons, and loading states.
Provide title, value, change, and an optional icon to render a metric card.
Total Revenue
$48,295
<x-ui::stats-card
title="Total Revenue"
value="$48,295"
change="+12.5%"
change-label="vs last month"
icon="banknotes"
icon-color="green"
/>
The trend indicator is auto-detected from the change prefix: + → green up, - → red down, anything else → neutral. Override with the trend prop.
Revenue
$48,295
Churn Rate
3.2%
Uptime
99.98%
{{-- Trend is auto-detected from the change string prefix --}}
{{-- + prefix → up (green) --}}
<x-ui::stats-card title="Revenue" value="$48,295" change="+12.5%" change-label="vs last month" />
{{-- - prefix → down (red) --}}
<x-ui::stats-card title="Churn Rate" value="3.2%" change="-0.4%" change-label="vs last week" />
{{-- neutral (no +/- prefix) --}}
<x-ui::stats-card title="Uptime" value="99.98%" change="0.00%" change-label="no change" />
{{-- Override explicitly --}}
<x-ui::stats-card title="Sessions" value="12,430" change="821" change-label="new today" trend="up" />
Three visual styles: default (shadow), outline (border only), and flat (muted background).
Default
$48,295
Outline
$48,295
Flat
$48,295
{{-- Default: white bg + subtle shadow --}}
<x-ui::stats-card title="Revenue" value="$48,295" variant="default" />
{{-- Outline: white bg + visible border --}}
<x-ui::stats-card title="Revenue" value="$48,295" variant="outline" />
{{-- Flat: gray bg, no border --}}
<x-ui::stats-card title="Revenue" value="$48,295" variant="flat" />
Use icon-color to match the icon badge to your metric's meaning. Accepts: blue green yellow red purple sky pink zinc.
Revenue
$48,295
Users
8,421
Orders
1,204
Alerts
3
Pending
27
Uptime
99.98%
<x-ui::stats-card title="Revenue" value="$48,295" icon="banknotes" icon-color="green" />
<x-ui::stats-card title="Users" value="8,421" icon="users" icon-color="blue" />
<x-ui::stats-card title="Orders" value="1,204" icon="shopping-cart" icon-color="purple" />
<x-ui::stats-card title="Alerts" value="3" icon="bell-alert" icon-color="red" />
<x-ui::stats-card title="Pending" value="27" icon="clock" icon-color="yellow" />
<x-ui::stats-card title="Uptime" value="99.98%" icon="signal" icon-color="sky" />
Add a description for context or secondary detail below the trend badge.
Active Users
8,421
23% above the 30-day average of 6,842 users.
<x-ui::stats-card
title="Active Users"
value="8,421"
change="+324"
change-label="new today"
description="23% above the 30-day average of 6,842 users."
icon="users"
icon-color="blue"
/>
Set :loading="true" to show a skeleton while data is being fetched. Useful with Livewire's wire:loading pattern.
<x-ui::stats-card
title="Total Revenue"
value=""
:loading="true"
icon="banknotes"
/>Pass any content into the slot to render below the metric — useful for inline sparklines, progress bars, or mini-charts.
Storage Used
68.4 GB
CPU Load
42%
<x-ui::stats-card
title="Storage Used"
value="68.4 GB"
change-label="of 100 GB"
>
<x-ui::progress :value="68" size="sm" color="blue" />
</x-ui::stats-card>Compose multiple cards in a responsive grid for a typical analytics dashboard header.
Total Revenue
$48,295
Active Users
8,421
New Orders
1,204
Churn Rate
3.2%
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
<x-ui::stats-card
title="Total Revenue"
value="$48,295"
change="+12.5%"
change-label="vs last month"
icon="banknotes"
icon-color="green"
/>
<x-ui::stats-card
title="Active Users"
value="8,421"
change="+324"
change-label="new today"
icon="users"
icon-color="blue"
/>
<x-ui::stats-card
title="New Orders"
value="1,204"
change="+8.2%"
change-label="vs last week"
icon="shopping-cart"
icon-color="purple"
/>
<x-ui::stats-card
title="Churn Rate"
value="3.2%"
change="-0.4%"
change-label="vs last month"
icon="arrow-trending-down"
icon-color="red"
/>
</div>