Patterns

Reconciliation rate card

The hero block of the Reconciliations screen: a Card with a KPI header (big rate % + title + info + subtitle) and a legend, over a provider × day heatmap. Each cell is a reconciliation-rate bucket. Built to the Figma Reconciliation rate card (node 1577:116747) with the exact Figma palette (blue-100 / violet-400 / blue-500 / gray-200).

Updated Jul 28, 2026 by Juan Pablo Turina

Anatomy

A KPI header (big rate + a vertical separator + title + info + subtitle on the left; the 4-bucket legend on the right), a divider, then the heatmap: providers on the fixed Y axis (logo + 100%) and days on the X axis. Cells are fixed 24px squares; the plot scrolls horizontally for a full month. Hovering a cell draws a crosshair + a Day / bucket tooltip.

95%

Reconciliation rate

2.762.188 reconciled transactions

+ 95%94% - 80%-79%No transactions

100%

123456789101112131415161718192021222324252627282930

1
KPI + title
Big rate % + a vertical Separator + the Reconciliation rate title with an info Tooltip + a metadata subtitle (reconciled transactions count).
2
Legend
Four buckets: +95% (blue-100), 94-80% (violet-400), -79% (blue-500), No transactions (gray-200) — the exact Figma palette.
3
Y axis — providers
A fixed left column: each row is a provider CDN logo + its per-row rate (100%).
4
Heatmap + X axis
A CSS grid of 24px cells coloured by bucket, one row per provider, one column per day; the day numbers run along the bottom. Hover shows a crosshair + tooltip.

Import

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

Self-contained with demo data. Hovering a cell draws a crosshair + a Day / bucket tooltip. The bucket palette is the exact Figma one (blue-100 / violet-400 / blue-500 / gray-200).

import { ReconciliationRateCard } from "@/components/patterns/reconciliation-rate-card";

<ReconciliationRateCard
  rate="95%"
  subtitle="2.762.188 reconciled transactions"
  providers={["dlocal", "mercadopago", "adyen"]}
  days={30}
/>

Props

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

Prop	Type	Default	Description
rate	string	'95%'	The big KPI reconciliation rate.
subtitle	string	'2.762.188 reconciled transactions'	Metadata line under the title.
providers	string[]	8 demo slugs	Provider slugs for the Y axis (Yuno CDN logos).
days	number	30	Number of day columns. Fixed 24px cells scroll horizontally past the visible width.
className	string	—	Merged onto the Card.

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

ChartThe Chart doc carries a Recharts version of this heatmap recipe (same buckets).
KPI cardFor a single metric with no matrix, use KpiCard.
Table cardThe sibling block on the Reconciliations screen — a titled data table.