Match board

A React component in Beamline's Data & tables category.

Month-end matching as one picture: bank lines and books entries side by side with threads between them — solid for matched, dashed with the host's reason for suggested, a fan with its sum check for one-to-many — framed by the money still to explain, which shrinks with every match. Drag a line across to match (entries say how well they fit), tap it and then its entry, or M and Enter by keyboard; teach a rule from a match and watch its preview catch the rest, with the lines it leaves and why. A queue on phones.

Use it for

Bank reconciliation, invoice-to-PO matching, payouts to orders, counted to expected stock: any "pair A with B" job where the unpaired ones are the problems.
The host decides candidates, reasons, fits and what a rule catches; the part draws, explains and previews.

Not for

Comparing two versions of one table → diff-table.
Mapping import columns to fields → import-mapping.

Anatomy

header: statement balance and date, books balance, the difference with how many bank lines are left (Reconciled to the … statement at zero)
rule (after a manual match): the sentence with its text and category, the preview's catches and leaves, Preview and Save
board: bank rows | the thread layer with suggestion pills and their cards | books rows (category, not in the bank yet, fit while dragging)
queue (phone): one bank line, its best fits, other entries, Skip

States

matching
dragging (a live thread; entries say their fit)
picking (keyboard)
rule (draft)
previewing (threads drawn one after another; lines left behind marked)
reconciled
queue (phone)

Keyboard

Tab moves through bank rows; each row says its match or suggestions
M on an unmatched bank row picks it; ↑/↓ move through the books entries, Enter matches, Escape cancels back to the row
Suggestion pills are buttons: Enter opens the card with Match and Not this
Make a rule, its fields, Preview and Save are ordinary controls; the difference is a live region

Motion

Threads follow the rows; a dragged line pulls a live thread to the pointer; a rule's preview draws its threads one after another (stroke draw, 180 ms apart). Reduced motion draws them at once.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	The account: "Business checking ··4410".
`left` (required)	`MatchLine[]`	—
`right` (required)	`MatchLine[]`	—
`matches` (required)	`MatchPair[]`	—
`balance` (required)	`{ statement: number; statementDate: string; books: number; }`	—	The statement's closing balance and date, and the books' balance for the same account, shown as given. The books include entries the bank has not cleared yet (`notInBank`); the account reads reconciled when no bank line is left unmatched and the statement equals the books less those entries. "Left to explain" is the money on the bank lines not matched yet.
`onMatch`	`((pair: { left: string[]; right: string[]; adjustments?: { label: string; amount: numbe…`	—	A match made here. `via` says how: a suggestion accepted (then `from` is that suggestion's id, so the host turns it confirmed instead of adding a pair, and `adjustments` are its own), a drag, a tap on each side, or the keyboard (M, then Enter). The host gives a new pair its id, and replaces any suggestion the new pair overlaps.
`onReject`	`((pairId: string) => void)`	—	A suggestion declined (Not this): the host removes it from `matches` and may remember not to suggest it again.
`fit`	`((left: MatchLine, right: MatchLine) => string \| null)`	—	How well a books entry fits a bank line, in words, while it is dragged over: "same amount", "differs by $5.00".
`rules`	`{ draft: (left: MatchLine) => MatchRuleDraft; preview: (draft: MatchRuleDraft) => Match…`	—	Rules taught from a manual match: the first draft (called after onMatch, so the host's matches already hold that match), the host's preview on this month, and saving.
`categories`	`string[]`	—	The books categories a rule can pick entries by (its `category`).
`currency`	`string`	—	ISO code for the default money format. Default USD.
`format`	`((amount: number) => string)`	—	Money in the host's own format; it wins over `currency`.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "header" \| "row" \| "column" \| "card" \| "pill" \| "threads" \| "ru…`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { MatchBoard } from "@beamline/match-board";

Get it

Match board is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Match boardComplete system · $49

Month-end matching as one picture.

Month end as one picture

October's bank lines against the books: solid threads are matched, dashed ones are suggested with the reason on the pill (open one: the sum, Match, Not this). Drag GUSTO PAYROLL 10/03 onto Payroll 1–15 Oct, press Make a rule, then Preview: the other payroll lines draw across on their own, and the contractor payment is left with the reason why. Keyboard: M on a bank line, then arrows and Enter.

0 × 0full

Nearly reconciled

One line left: match the café receipt and the header says the account is reconciled to the 31 October statement.