Dashboard Tiles
KpiCard, SparkCard, and Delta — compact building blocks for analytics dashboards.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <DashboardTiles />
When to Use
- Show single-metric KPIs with optional deltas and mini charts
- Combine with Bento to build a full dashboard grid
- Use
Deltainline anywhere you display a change number - Use
SparkCardfor compact trend visibility without reaching for the full Chart component
Revenue
$48,290
+12.3%
Signups
1,204
+8.1%
Net promoter
62
+3
Revenue
$48,290
-4.2%
Signups
1,204
-12
Weekly sessions
8,492
-0.8%
Churn rate
2.4%
-0.6%
Error rate
0.12%
+0.04
Page views
184,290
+6.7%
Signups
1,482
-2.1%
Daily active
12,402
Revenue
$48,290
Avg. load time
312ms
+12.3%
-4.5%
0%
-3.2%
+15
API Reference
KpiCard
| Property | Type | Default | Description |
|---|---|---|---|
| Label | string? | null | Metric label. |
| Value | string? | null | Pre-formatted value string. |
| Delta | double? | null | Optional delta value. |
| DeltaFormat | KpiDeltaFormat | Percent | Percent or Absolute. |
| DeltaPositive | KpiDeltaDirection | Good | Whether "up" is good (green) or bad (red). |
| IconContent | RenderFragment? | - | Icon slot before the label. |
| SparkContent | RenderFragment? | - | Optional compact chart slot aligned right. |
SparkCard
| Property | Type | Default | Description |
|---|---|---|---|
| Label | string? | null | Card label. |
| Value | string? | null | Pre-formatted metric value. |
| Data | IEnumerable<double>? | null | Sparkline data. |
| ChildContent | RenderFragment? | - | Fallback slot — drop in a full Chart instead of the built-in sparkline. |
Delta
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Numeric delta. Sign drives arrow and color. |
| Format | DeltaFormat | Percent | Percent or Absolute. |
| Positive | DeltaDirection | Good | Good = +is-green; Bad = +is-red. |
| ShowArrow | bool | true | Toggles the directional chevron. |