Statistic - defuss-shadcn

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

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.

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