Statistic

Atom

Bare KPI number with label, no card chrome — see StatCard for the card-wrapped sibling. Supports numeric `precision`, HTML `prefix`/`suffix`, an up/down `trend` indicator, and a pulsing skeleton via `loading`.

Preview

Active users

8420

Revenue

$ 128400.00 +12.4%

Churn rate

3.1 % -0.6%

Code

<%- include('modules/ui/Statistic', {
  label: 'Revenue',
  value: 128400,
  precision: 2,
  prefix: '$',
  trend: 'up',
  trendValue: '+12.4%',
}) %>

Preview

Active users

Revenue

Code

<%- include('modules/ui/Statistic', {
  label: 'Active users',
  loading: true,
}) %>

<%
  var _label     = locals.label     || '';
  var _value     = (locals.value !== undefined && locals.value !== null) ? locals.value : '';
  var _precision = locals.precision;
  var _prefix    = locals.prefix    || '';
  var _suffix    = locals.suffix    || '';
  var _trend     = locals.trend     || '';
  var _trendValue = locals.trendValue || '';
  var _loading   = !!locals.loading;
  var _className = locals.className || '';

  var _displayValue = _value;
  if (_precision !== undefined && _precision !== null && typeof _value === 'number' && !isNaN(_value)) {
    _displayValue = _value.toFixed(_precision);
  } else if (_precision !== undefined && _precision !== null && typeof _value === 'string' && _value !== '' && !isNaN(Number(_value))) {
    _displayValue = Number(_value).toFixed(_precision);
  }

  var trendIconClass = _trend === 'down' ? 'fa-arrow-down' : 'fa-arrow-up';
  var trendColorClass = _trend === 'down' ? 'text-error' : 'text-success';
%>
<div class="flex flex-col gap-1<%= _className ? ' ' + _className : '' %>">
  <span class="text-xs text-text-secondary"><%= _label %></span>
  <% if (_loading) { %>
    <span class="h-7 w-24 animate-pulse rounded bg-surface-sunken" aria-hidden="true"></span>
    <span class="sr-only">Loading <%= _label %></span>
  <% } else { %>
    <div class="flex items-baseline gap-1">
      <% if (_prefix) { %><span class="text-lg font-semibold text-text-secondary"><%- _prefix %></span><% } %>
      <span class="text-2xl font-bold tabular-nums text-text-primary"><%= _displayValue %></span>
      <% if (_suffix) { %><span class="text-lg font-semibold text-text-secondary"><%- _suffix %></span><% } %>
      <% if (_trend && _trendValue) { %>
        <span class="ml-1 inline-flex items-center gap-1 text-xs font-medium <%= trendColorClass %>">
          <i class="fa-solid <%= trendIconClass %>" aria-hidden="true" style="font-size:10px"></i>
          <%= _trendValue %>
        </span>
      <% } %>
    </div>
  <% } %>
</div>

Statistic

Basic + trend

Loading