Stat Card

Dashboard metric card with label, reactive value, and optional status coloring.

The caller owns number formatting — pass a Signal<String> with locale-aware or abbreviated values. Variants map to theme status colors (Success, Danger, Warning) for KPIs that need semantic emphasis.

  • Dashboard KPI rows and summary strips
  • Numeric or formatted string metrics that update reactively
  • Status-colored values (success rate, error count, warnings)
Default

Single metric card with label and a reactive formatted value in neutral styling. Use for dashboard KPIs and summary rows where color coding is not needed.

Total Users
1,234
With Icon

Stat card with an icon beside the label for quicker visual scanning. Use when the metric type is recognizable by icon, such as users or sessions.

Active Sessions
1,234
Color Variants

Success, danger, and warning value colors side by side for status-driven metrics. Use when the number itself conveys health, such as error counts or success rates.

Success Rate
98.5%
Errors
12
Warnings
3
Dashboard Example

Wrapped row of stat cards combining icons and color variants on a typical dashboard. Use as a layout reference when building multi-metric summary strips.

Total Orders
8,492
Revenue
$124.5K
Pending
23
Failed
5