v0.9.8defuss-shadcn
Theme
Design your own

defuss-shadcn / Data Display / statistic

Built with: CSS

StatisticATM

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

On this page (4)
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.

§With Trend Indicator

Colored trend arrows showing positive/negative movement.

§In Cards

Statistics composed inside card components for dashboard layouts - a card sized to its figure (width: fit-content, a min-width so a short value keeps its shape), not stretched across the page.

§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;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub