KpiCard: Blazor kpi card component

Examples

Label and Value are required; Subtitle adds context under the number.

Monthly recurring revenue

€48.2 k

+12% vs. September

Active users

18,240

across 64 workspaces

New signups

3,912

website/Examples/Data/KpiCardBasicExample.razor Source

Pass a daisyUI token such as var(--color-success) so the tile follows the active theme.

Uptime

99.98%

last 30 days

Open tickets

awaiting a reply

Failed deployments

this week

Trials

1,280

ending this month

website/Examples/Data/KpiCardColorsExample.razor Source

Active users

18,240

+12% vs. September

Label

Value

Subtitle

Color

<KpiCard
         Label="Active users"
         Value="18,240"
         Subtitle="+12% vs. September" />

DaisyBlazor.Data

KPI tile: caption + large value + optional subtitle, with an optional coloured accent stripe.

Accent KpiAccent
= KpiAccent.Start
Where the coloured stripe is drawn: on the start edge (the default), on top, or not at all.
Color string
= "var(--color-primary)"
CSS color of the accent stripe (see Accent) (the value text keeps the base text colour for contrast). Defaults to the active daisyUI theme's --color-primary token so the tile stays on-palette; pass any CSS colour to override.
Elevation int
= 2
Shadow depth of the tile, as on Paper (0 for none). Defaults to 2.
Label string
= required
Caption shown above the value. Already-resolved text (pass @L["…"] at the call site to localize).
Subtitle string
= null
Optional smaller caption beneath the value.
Value string
= required
Main metric value.
Class string
= null
Additional CSS classes applied to the tile.
Style string
= null
Inline style appended to the tile.

Name	Type	Default	Description
Accent	KpiAccent	KpiAccent.Start	Where the coloured stripe is drawn: on the start edge (the default), on top, or not at all.
Color	string	"var(--color-primary)"	CSS color of the accent stripe (see Accent) (the value text keeps the base text colour for contrast). Defaults to the active daisyUI theme's --color-primary token so the tile stays on-palette; pass any CSS colour to override.
Elevation	int	2	Shadow depth of the tile, as on Paper (0 for none). Defaults to 2.
Label	string	required	Caption shown above the value. Already-resolved text (pass @L["…"] at the call site to localize).
Subtitle	string	null	Optional smaller caption beneath the value.
Value	string	required	Main metric value.
Class	string	null	Additional CSS classes applied to the tile.
Style	string	null	Inline style appended to the tile.