# KpiCard

Source: https://lumeo.nativ.sh/components/kpi-card

# KpiCard

Dashboard KPI tile showing value, label, and trend.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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.

Preview Code

Basic

Total Revenue

$48,295

Active Users

12,843

Conversion Rate

3.6%

Preview Code

With Delta

Monthly Revenue

$18,450

+8.3%

Churn Rate

2.1%

\-0.4%

Support Tickets

247

\-12

Preview Code

With Icon and Sparkline

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.

## Related Components

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