Patterns

Realtime status card

A compact status card used above real-time monitoring surfaces (Health → Real time status row). Two stacked sections separated by a border: HEADER (px-6 py-4) with text-sm muted label + text-3xl semibold value + optional secondary Badge with trend icon + delta; FOOTER (px-6 py-3, border-t) with an optional text-xs muted subtitle (typically 'vs. previous hour' or a timestamp). Sibling of KpiCard (standalone with View more + arrow-trend) and SelectableKpiCell (clickable, no chrome). RealtimeStatusCard is display-only, non-interactive, always sitting in a horizontal row of siblings that hover just above a time-series chart. The trend Badge uses semantic tokens: positive = success (green tint + TrendUp icon), negative = destructive (red tint + TrendDown icon) — one of the few legit signal uses of --destructive.

Updated Aug 6, 2026 by Leonardo Posada

Anatomy

A shadcn Card (rounded-lg, no gap, no shadow) with two stacked regions. HEADER: label above a baseline row with the KPI value + an optional trend Badge (secondary variant, tinted success or destructive per `positive`). FOOTER: optional text-xs muted subtitle in a border-t region. When `subtitle` is omitted the footer + separator are not rendered — the card ends flush at the header.

Successful payments

127,540

+12%

vs. previous hour

  1. 1
    Card wrapper

    shadcn Card with gap-0 overflow-hidden p-0 shadow-none. The pattern controls its own padding + separator; the Card just provides the rounded-lg border and card surface.

  2. 2
    Header — label

    text-sm text-muted-foreground. Metric name at the top of the card.

  3. 3
    Header — value

    text-3xl font-semibold leading-none tracking-tight tabular-nums text-card-foreground. Tabular-nums keeps widths aligned when several cards sit in a row.

  4. 4
    Header — trend Badge

    shadcn <Badge variant="secondary"> with a semantic tint (bg-success/15 + text-success for positive; bg-destructive/15 + text-destructive for negative) and the matching Phosphor icon (TrendUp / TrendDown, weight light). Omit `trend` to hide.

  5. 5
    Footer — subtitle

    text-xs text-muted-foreground, sitting in a px-6 py-3 border-t block. Canonical copy: 'vs. previous hour', 'Updated 2 min ago'. Omit `subtitle` to render the card without the footer + separator.

Recipes

Positive trend

The healthy shape: green tint + TrendUp icon + delta. Use for metrics where higher is better (successful payments, approval rate).

Successful payments

127,540

+12%

vs. previous hour

<RealtimeStatusCard
  label="Successful payments"
  value="127,540"
  trend={{ delta: "+12%", positive: true }}
  subtitle="vs. previous hour"
/>
Negative trend

Red tint + TrendDown icon + delta. The pattern maps `positive: false` to TrendDown automatically — no need to pass a separate icon. Use for metrics where lower is better AND the KPI moved up (latency getting worse), or the metric moved down when it shouldn't (approval rate dropped).

Yuno latency p90

1287 ms

+9%

vs. previous hour

<RealtimeStatusCard
  label="Yuno latency p90"
  value="1287 ms"
  trend={{ delta: "+9%", positive: false }}
  subtitle="vs. previous hour"
/>
No trend

Omit `trend` entirely for absolute-value metrics that don't compare against a previous window (active alerts, running processes count). Header renders label + value only.

Active alerts

16

<RealtimeStatusCard label="Active alerts" value="16" />
Row above a chart (canonical)

The Health → Real time status shape: 4 RealtimeStatusCards in a horizontal grid above a time-series chart. Wraps to fewer columns on narrow screens. Consumers layout with the standard grid classes.

Successful payments

127,540

+12%

vs. previous hour

Approval rate

94.20%

+3%

vs. previous hour

Yuno latency p90

1287 ms

+9%

vs. previous hour

Active alerts

16

<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
  <RealtimeStatusCard label="Successful payments" value="127,540" trend={{ delta: "+12%", positive: true }} subtitle="vs. previous hour" />
  <RealtimeStatusCard label="Approval rate"      value="94.20%"  trend={{ delta: "+3%",  positive: true }} subtitle="vs. previous hour" />
  <RealtimeStatusCard label="Yuno latency p90"   value="1287 ms" trend={{ delta: "+9%",  positive: false }} subtitle="vs. previous hour" />
  <RealtimeStatusCard label="Active alerts"      value="16" />
</div>

Import

Copy this import line at the top of the file where you compose this molecule.

RealtimeStatusCard is a pure display component — no state, no callbacks, no click behavior. If you need a clickable KPI use SelectableKpiCell; if you need a standalone metric with a trend + View more use KpiCard.
import { RealtimeStatusCard } from "@/components/patterns/realtime-status-card";

Props

Everything else is forwarded to the underlying elements via ...props.

PropTypeDefaultDescription
labelstring (required)—The metric label above the value. text-sm muted.
valuestring (required)—The KPI value. Rendered text-3xl semibold tabular-nums (so widths align across cards in a row).
trend{ delta: string; positive: boolean }—Optional trend Badge next to the value. `positive: true` → success tint + TrendUp icon; `positive: false` → destructive tint + TrendDown icon. `delta` is the raw label (e.g. "+12%", "-3%").
subtitlestring—Optional footer text ("vs. previous hour", timestamps). Omit to render the card without the footer + border-t (header only).
classNamestring—Extra classes on the outer Card.

Related

Cross-links to the atoms this molecule composes and sibling patterns.

  • KPI cardStandalone metric sibling (trend arrow + View more). Use when the card is the only KPI on the surface (Home tile, single-metric block).
  • Selectable KPI cellThe clickable sibling — multi-cell grid where one is active and a downstream chart reacts.
  • BadgePowers the trend pill (secondary variant + semantic tint).