In context
Seven layout variants in real product surfaces — default quick-stats, inline summary rows, delta deltas, trend with inline SparkChart, progress toward goal, distribution segmented breakdown, and a hero summary callout.
6
Active roles
13,283
Total users
16
Modules
142
Pending actions
$4.2M
Monthly payroll runs
$1.2M
Reimbursements YTD
Monthly revenue
$4.2M+8.4%
Failed sync jobs
6-72%
Uptime (90d)
99.98%+0.04%
New signups
2,481+12.6%
Sprint tasks complete
77%23 of 30 tasks
Annual revenue target
84%$4.2M of $5M
Revenue by status
$4.2M
Paid64%Pending24%Overdue12%
99.98%
Uptime · last 90 days
Quick stats row (MiHCM Security)
6
Active Roles
13,283
Total Users
16
Modules
import { StatCard } from '@mihcm/ui/StatCard';
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
<StatCard tone="primary" icon={<ShieldIcon />} value="6" label="Active Roles" />
<StatCard tone="accent" icon={<PeopleIcon />} value="13,283" label="Total Users" />
<StatCard tone="success" icon={<GridIcon />} value="16" label="Modules" />
</div>Without an icon
42
Items in cart
<StatCard value="42" label="Items in cart" />With an inline trend
88.7%↑ 4.2
Uptime
<StatCard
tone="success"
icon={<TrendIcon />}
value={
<span className="inline-flex items-baseline gap-1">
88.7%
<span className="text-xs text-success">↑ 4.2</span>
</span>
}
label="Uptime"
/>