Statistic

A numeric display for key metrics. Supports title, value, description, and trend indicators.

Component Skill — components/statistic/component-skill.md

Native basis

<div> containers displaying a numeric value with a label and optional trend indicator.

Web Platform APIs

<div>

Classes

.statistic .statistic-title .statistic-value .statistic-description .statistic-trend

Data attributes

• data-trend — values: up, down

Accessibility

• Use semantic text content — values are read inline

• Trends are conveyed by text, not color alone ("+12.5%")

Basic

Simple statistic with title, value, and description.

Total Revenue

$45,231.89

+20.1% from last month

Subscriptions

+2,350

+180.1% from last month

<div class="statistic">
  <p class="statistic-title">Total Revenue</p>
  <p class="statistic-value">$45,231.89</p>
  <p class="statistic-description">+20.1% from last month</p>
</div>

With Trend Indicator

Colored trend arrows showing positive/negative movement.

Revenue

$45,231.89

+20.1% from last month

Bounce Rate

12.3%

-4.5% from last month

<div class="statistic">
  <p class="statistic-title">Revenue</p>
  <p class="statistic-value">$45,231.89</p>
  <p class="statistic-description">
    <span class="statistic-trend" data-trend="up">
      <svg>...</svg>
      +20.1%
    </span>
    from last month
  </p>
</div>

In Cards

Statistics composed inside card components for dashboard layouts.

Total Users

12,489

+8.2%

Active Now

573

+12.3%

Churn Rate

2.4%

-1.1%

<article class="card">
  <div class="card-content" style="padding:1.5rem;">
    <div class="statistic">
      <p class="statistic-title">Total Users</p>
      <p class="statistic-value">12,489</p>
      <p class="statistic-description">
        <span class="statistic-trend" data-trend="up">+8.2%</span>
      </p>
    </div>
  </div>
</article>

CSS view file

Styles for the statistic component. Uses design tokens for colors, spacing, and radius.

@layer components {
  .statistic {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .statistic-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground);
    letter-spacing: 0.01em;
  }

  .statistic-value {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--foreground);
  }

  .statistic-description {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .statistic-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-weight: 500;

    & svg {
      width: 0.75rem;
      height: 0.75rem;
    }

    &[data-trend="up"] {
      color: #16a34a;
    }

    &[data-trend="down"] {
      color: #dc2626;
    }
  }
}