KPICard

DASHBOARD

Key performance indicator card with value, label, and trend arrow.

[EXAMPLES]

With Trend

[PROPS]

PROPTYPEDEFAULTDESCRIPTION
titlestring—KPI label (renders UPPERCASE)
valuestring | number—Display value
changenumber—Percentage change number
trend"up" | "down" | "neutral"—Trend direction arrow
iconReactNode—Optional icon

[ACCESSIBILITY]

ARIA

  • >Semantic card structure
  • >Trend communicated via text and icon