MiHCM
data/@mihcm/ui·v0.21.0·stable

StatCard

Centered icon tile + big number + caption. The "Quick stats" row primitive — six tones to match the metric meaning.

ConfiguratorExamplesUsageAccessibilityApi

Use cases

  • Quick-stats row at the top of a dashboard — "Active Roles", "Total Users", "Modules".
  • Single metric callouts inside a card-driven layout.

When NOT to use

  • For a chart → embed your charting library inside a Card.
  • For a small tag on a row → use StatusBadge.

Tones

ToneUse when
primaryBrand metric — counts of system entities.
accentGrowth / activity — total users, messages.
successPositive metric — completion rate, uptime.
warningAttention — pending approvals, low-stock.
dangerCritical metric — failed jobs, breaches.
neutralCatch-all when no tonal meaning applies.

Composition

  • The icon slot accepts any 18 px SVG — Lucide icons, hand-rolled SVGs, image assets all work.
  • value accepts ReactNode, so you can render a count + an inline trend arrow if needed.
  • Use a grid grid-cols-1 sm:grid-cols-3 gap-3 wrapper for the canonical 3-up row from the MiHCM Security prototype.

Density

The card is intentionally compact (py-4 px-3). For higher-density dashboards, wrap multiple StatCards in a single Card and use a Separator between them.

  • Card — general-purpose container for richer content.
  • Chart — data visualization for trends and comparisons.
  • StatusBadge — inline status indicator for table rows.