Stat

Statistic display with prominent value and descriptive label.

Default

2,847 Total users

Base

ClassDescription
.ui-statBase class

Size

ClassValue
.ui-stat--smsm

Override these CSS custom properties to customize the component.

TokenDefaultDescription
--ui-stat-gap var(--ui-space-1) Gap between children
--ui-stat-value-font-size var(--ui-font-size-3xl) Value display font size
--ui-stat-value-font-weight var(--ui-font-weight-bold) Value display font weight
--ui-stat-value-line-height var(--ui-line-height-3xl) Value display line height
--ui-stat-value-color var(--ui-color-text) Value display text color
--ui-stat-label-font-size var(--ui-font-size-sm) Label font size
--ui-stat-label-color var(--ui-color-text-muted) Label text color
--ui-stat-label-line-height var(--ui-line-height-sm) Label line height

Multiple Stats

12.5k Revenue
573 Orders
98% Satisfaction
<div class="ui-row ui-row--lg">
  <div class="ui-stat">
    <span class="ui-stat__value">12.5k</span>
    <span class="ui-stat__label">Revenue</span>
  </div>
  <div class="ui-stat">
    <span class="ui-stat__value">573</span>
    <span class="ui-stat__label">Orders</span>
  </div>
  <div class="ui-stat">
    <span class="ui-stat__value">98%</span>
    <span class="ui-stat__label">Satisfaction</span>
  </div>
</div>

Small

42 Active now
<div class="ui-stat ui-stat--sm">
  <span class="ui-stat__value">42</span>
  <span class="ui-stat__label">Active now</span>
</div>