# Dashboard Tiles

Source: https://lumeo.nativ.sh/components/dashboard-tiles

# Dashboard Tiles

KpiCard, SparkCard, and Delta — compact building blocks for analytics dashboards.

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

<DashboardTiles />

## When to Use

-   Show single-metric KPIs with optional deltas and mini charts
-   Combine with [Bento](/components/bento) to build a full dashboard grid
-   Use `Delta` inline anywhere you display a change number
-   Use `SparkCard` for compact trend visibility without reaching for the full Chart component

Preview Code

KpiCard — positive delta

Revenue

$48,290

+12.3%

Signups

1,204

+8.1%

Net promoter

62

+3

Preview Code

KpiCard — negative delta

Revenue

$48,290

\-4.2%

Signups

1,204

\-12

Weekly sessions

8,492

\-0.8%

Preview Code

KpiCard — bad direction (lower is better)

Churn rate

2.4%

\-0.6%

Error rate

0.12%

+0.04

Preview Code

KpiCard with SparkContent

Page views

184,290

+6.7%

Signups

1,482

\-2.1%

Preview Code

SparkCard

Daily active

12,402

Revenue

$48,290

Avg. load time

312ms

Preview Code

Delta pill — standalone

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

## Related Components

-   [Bento](/components/bento) — Dashboard grid layout that wraps these tiles
-   [Statistic](/components/statistic) — Lower-level stat with prefix/suffix
-   [Chart](/components/chart) — Full-featured charting for when a sparkline is not enough