Lumeo

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 SparkContent to give a quick trend visual.

Basic

Total Revenue

$48,295

Active Users

12,843

Conversion Rate

3.6%

With Delta

Monthly Revenue

$18,450

+8.3%

Churn Rate

2.1%

-0.4%

Support Tickets

247

-12

With Icon and Sparkline

Page Views

94,210

+5.7%

Signups

1,380

+22.1%

API Reference

KpiCard

SparkCard — Compact card variant focused on an inline sparkline chart.
Delta — Standalone trend badge component used inside KpiCard.
Statistic — Big-number statistic display with label and unit.
Bento — Masonry grid for composing dashboard tile layouts.