Stat

A KPI card with a trend-coloured change.

Total Revenue$45,231.89

import { BuiStat } from 'ng-blatui';

<bui-stat label="Total Revenue" value="$45,231.89" />

With trend

New Customers1,204+12.5%vs last month

Churn rate2.4%-0.5%vs last month

<bui-stat label="New Customers" value="1,204" change="+12.5%" trend="up" caption="vs last month" />
<bui-stat label="Churn rate" value="2.4%" change="-0.5%" trend="down" />

Grid

Revenue$45.2k+12.5%

Users2,340+4.1%

Orders1,210-2.0%

Refunds34-8.0%

<div class="grid gap-4 sm:grid-cols-4">
  <bui-stat label="Revenue" value="$45.2k" change="+12.5%" trend="up" />
  <bui-stat label="Users" value="2,340" change="+4.1%" trend="up" />
</div>

With sparkline

Active users2,318+12.4%

<!-- [sparkline] draws an inline trend line -->
<bui-stat label="Active users" value="2,318" change="+12.4%" trend="up" [sparkline]="series" />
// series = [8, 11, 9, 14, 12, 18, 16, 22]

API reference

Inputs

Prop	Type	Default	Description
`label`	`string \| null`	`null`	Small caption shown above the value.
`value`	`string \| number`	`''`	Primary statistic displayed as the large value.
`change`	`string \| null`	`null`	Change indicator (e.g. "+12%"); coloured by trend.
`trend`	`"down" \| "neutral" \| "up" \| null`	`null`	Explicit trend direction; inferred from `change`'s sign when null.
`caption`	`string \| null`	`null`	Muted text shown next to the change value.
`sparkline`	`readonly number[]`	`[]`	Optional inline sparkline drawn from a series of numbers.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.