KPI card
A single-metric card for the Yuno Dashboard: label + big value (with optional suffix) + optional View more CTA + optional trend row (arrow + delta % + period text). The canonical shape any prototype uses to surface a KPI on the Home, Insights, Reports, or a section header.
Anatomy
A Card split into two rows by a border. Top row: label + big value (with optional currency suffix) on the left, an optional View more Button on the right. Bottom row: a trend arrow (Phosphor light) + a colored delta % + a period text. Hover lifts the card (primary border + shadow-xl — same lift as ConnectionCard / RoutingCard).
Total payments
$284,512USD
+9% compared to yesterday
- 1Label
Metric name at the top of the card (text-sm muted). Keep it short — 1 to 3 words.
- 2Value + suffix
The big number (text-3xl semibold tracking-tight). The optional suffix (e.g. USD) renders next to it at a lighter weight.
- 3View more CTA
Outline Button (sm), top-right. Optional. Omit onViewMore and the button is not rendered.
- 4Trend row
Bottom row, below a divider: TrendUp / TrendDown Phosphor icon + a colored delta % + the period text (default 'compared to yesterday'). Positive = text-success. Negative = text-destructive.
Variants
Trend arrow up + text-success. This is the default when trend is a non-negative number. Semantic use of the success token — never fake a positive trend to color the row green.
Total payments
$284,512USD
+9% compared to yesterday
<KpiCard label="Total payments" value="$284,512" valueSuffix="USD" trend={9} onViewMore={() => {}} />Trend arrow down + text-destructive. text-destructive here is a semantic signal (the metric fell), not a decoration — this is one of the few places the destructive token is legitimate in a Yuno dashboard.
Conversion rate
82.4%
-3% compared to yesterday
<KpiCard label="Conversion rate" value="82.4%" trend={-3} />Omit the trend prop and the whole bottom row disappears. Use for metrics that don't have a meaningful period comparison (e.g. account count) or when you want a leaner KPI block.
Approved payments
12,847
<KpiCard label="Approved payments" value="12,847" />Recipes
Three KpiCards stacked vertically next to a chart. The canonical Home layout: chart on the left in a 2-column grid, three KPIs stacked on the right with a fixed width. Each KpiCard has a View more CTA that opens the metric's detail view.
Total payments
$284,512USD
+9% compared to yesterday
Approved payments
12,847
+6% compared to yesterday
Conversion rate
94.2%
+4% compared to yesterday
<div className="flex flex-col gap-5">
<KpiCard label="Total payments" value="$284,512" valueSuffix="USD" trend={9} onViewMore={() => {}} />
<KpiCard label="Approved payments" value="12,847" trend={6} onViewMore={() => {}} />
<KpiCard label="Conversion rate" value="94.2%" trend={4} onViewMore={() => {}} />
</div>Three KpiCards side by side in a responsive grid. Use on a report or an insights section where the KPIs are peers of equal weight and no chart shares the row.
Total payments
$284,512USD
+9% compared to yesterday
Approved payments
12,847
+6% compared to yesterday
Conversion rate
94.2%
+4% compared to yesterday
<div className="grid grid-cols-1 gap-5 md:grid-cols-3">
<KpiCard label="Total payments" value="$284,512" valueSuffix="USD" trend={9} />
<KpiCard label="Approved payments" value="12,847" trend={6} />
<KpiCard label="Conversion rate" value="94.2%" trend={4} />
</div>Import
Copy this import line at the top of the file where you compose this molecule.
import { KpiCard } from "@/components/patterns/kpi-card";Props
Everything else is forwarded to the underlying elements via ...props.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string (required) | — | Metric label shown at the top of the card. |
| value | string (required) | — | Formatted metric value. Big number. E.g. "$284,512", "12,847", "94.2%". |
| valueSuffix | string | — | Optional suffix rendered next to the value at a lighter weight. E.g. "USD". |
| trend | number | — | Percentage delta. Positive → success arrow up; negative → destructive arrow down. Omit to hide the whole trend row. |
| trendPeriod | string | 'compared to yesterday' | Text after the trend %, describing the comparison window. |
| onViewMore | () => void | — | View more CTA handler. When omitted the button is not rendered. |
| viewMoreLabel | string | 'View more' | View more CTA label. |
| className | string | — | Extra classes merged onto the Card. |
Related
Cross-links to the atoms this molecule composes and sibling patterns.