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]