KpiCard
Dashboard KPI tile showing value, label, and trend.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <KpiCard />
When to Use
- Display a single metric prominently in a dashboard overview row.
- Pair with a delta badge to show week-over-week or month-over-month change.
- Add an inline sparkline via
SparkContentto give a quick trend visual.
Total Revenue
$48,295
Active Users
12,843
Conversion Rate
3.6%
Monthly Revenue
$18,450
+8.3%
Churn Rate
2.1%
-0.4%
Support Tickets
247
-12
Page Views
94,210
+5.7%
Signups
1,380
+22.1%
API Reference
KpiCard
| Property | Type | Default | Description |
|---|---|---|---|
| Label | string? | null | The metric label rendered above the value. |
| Value | string? | null | The primary metric value displayed prominently. |
| Delta | double? | null | Optional trend value. When set, renders a Delta badge in the card footer. |
| DeltaFormat | KpiDeltaFormat | Percent | Delta display format: Percent or Absolute. |
| DeltaPositive | KpiDeltaDirection | Good | Color semantics for the delta. Use Bad for metrics where up is negative (e.g. churn). |
| IconContent | RenderFragment? | null | Optional icon slot rendered next to the label. |
| SparkContent | RenderFragment? | null | Optional sparkline slot rendered in the card footer beside the delta. |
| Class | string? | null | Additional CSS classes merged onto the card root. |