Stat Metric Card

Compact card for a labeled metric with a signed amount — returns, Profit & Loss, and similar summaries. Use StatMetricCardSkeleton while the value is fetching — same Card frame with pulse bars so loading is obvious on a muted page background.

Usage

import {
  StatMetricCard,
  StatMetricCardSkeleton,
} from "@sophic/portal-ui";

<StatMetricCard
  title="Returns"
  amount="12.8%"
  subtitle="All-time"
  tone="up"
/>

<StatMetricCard
  title="Profit & Loss"
  amount="€7K"
  subtitle="All-time"
  tone="down"
/>

<StatMetricCard
  title="Cash"
  amount="€6,205.12"
  subtitle="Available"
  tone="neutral"
/>

<StatMetricCardSkeleton />;

Pass a fully formatted amount with no leading sign — the app owns formatting, the card owns the sign. tone="up" / "down" prefixes + / - and colors the full signed amount; neutral renders the amount as-is.

subtitle accepts a ReactNode — plain strings stay muted body text; pass composed nodes (e.g. ChangeIndicator) when the design owns its own colors.

Props

Changelog

• 2 September 2026 — Pulse bars use --skeleton (darker than --muted on light). Pass subtitle when the loaded card has a caption (e.g. All-time). Full notes
• 12 August 2026 — Demo titles use Profit & Loss (was Total P&L). Full notes
• 3 August 2026 — Full signed amount colored (not just + / -). Full notes
• 3 August 2026 — StatMetricCardSkeleton for loading tiles. Full notes
• 24 July 2026 — subtitle accepts ReactNode (strings still work). Full notes
• 24 July 2026 — Added. Pass unsigned amount; tone adds the colored + / -. Full notes