Base

Class	Description
.ui-stat	Base class

Size

Class	Value
.ui-stat--sm	sm

Override these CSS custom properties to customize the component.

Token	Default	Description
--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

<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>

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