Stat

wu-stat shows one figure: a label, a large value in tabular figures and an optional change line.

Class or attribute	Effect
`wu-stat`	Root. Column of parts
`wu-stat-label`	Part. Muted label
`wu-stat-value`	Part. Large value
`wu-stat-delta`	Part. Change line, muted by default
`data-trend="up"`, `data-trend="down"` on the delta	Draws an up or down arrow
`success`, `danger` on the delta	Success or danger text color
`sm`, `lg`	Smaller or larger value

Keep the signed number as text (“+12%”): the arrow and the color repeat it, they never replace it.

Default

Monthly revenue $48,210

<div class="wu-stat">
  <span class="wu-stat-label">Monthly revenue</span>
  <span class="wu-stat-value">$48,210</span>
</div>

Change line

Active users 1,284 +12% from last month

Churn 2.4% +0.3 points

Open tickets 37 -5 this week

<div class="grid cols-1 cols-3@md gap-6">
  <div class="wu-stat">
    <span class="wu-stat-label">Active users</span>
    <span class="wu-stat-value">1,284</span>
    <span class="wu-stat-delta success" data-trend="up">+12% from last month</span>
  </div>
  <div class="wu-stat">
    <span class="wu-stat-label">Churn</span>
    <span class="wu-stat-value">2.4%</span>
    <span class="wu-stat-delta danger" data-trend="up">+0.3 points</span>
  </div>
  <div class="wu-stat">
    <span class="wu-stat-label">Open tickets</span>
    <span class="wu-stat-value">37</span>
    <span class="wu-stat-delta" data-trend="down">-5 this week</span>
  </div>
</div>

Sizes

Small 1,284

Default 1,284

Large 1,284

<div class="flex wrap gap-8">
  <div class="wu-stat sm">
    <span class="wu-stat-label">Small</span>
    <span class="wu-stat-value">1,284</span>
  </div>
  <div class="wu-stat">
    <span class="wu-stat-label">Default</span>
    <span class="wu-stat-value">1,284</span>
  </div>
  <div class="wu-stat lg">
    <span class="wu-stat-label">Large</span>
    <span class="wu-stat-value">1,284</span>
  </div>
</div>

Right to left

The label, value and change line align to the right.

المستخدمون النشطون 1,284 ارتفاع 12% عن الشهر الماضي

<div class="wu-stat">
  <span class="wu-stat-label">المستخدمون النشطون</span>
  <span class="wu-stat-value">1,284</span>
  <span class="wu-stat-delta success" data-trend="up">ارتفاع 12% عن الشهر الماضي</span>
</div>

Load only the stat

@use "@wovenui/components/stat";

The stat needs no other component.