Component catalog

179 components across 13 families. The complete accounting and finance stack.

Families 1–8 are the design layer — primitives, surfaces, tables, charts. Families 9–13 are the domain layer — the general ledger, receivables, payables, the close, controls, consolidation, and metrics. The domain layer is where this stops being a component kit and starts being accounting software.

1. Primitives — 15 →

The layer everything else composes. Build these first; nothing above them is right until they are.

#	Component	One line
1	`Money`	The core primitive. A monetary value, formatted correctly.
2	`Delta`	A signed change, with polarity and a redundant non-color cue.
3	`Figure`	A large display numeral with automatic size step-down.
4	`Percent`	Percent vs. percentage points, explicitly discriminated.
5	`Rule`	Single / double / section accounting rule lines.
6	`StatusPill`	Payment and reconciliation states.
7	`Sparkline`	Inline trend, one-shot draw.
8	`Trend`	Arrow + delta + optional sparkline, composed.
9	`AsOf`	Timestamp with live relative formatting and a stated timezone.
10	`Redacted`	Masked value with reveal.
11	`Reference`	Copyable transaction/account ID with disambiguated glyphs.
12	`CurrencyBadge`	ISO code + optional flag.
13	`EntityMark`	Bank/merchant logo with the full fallback ladder.
169	`Tooltip`	Hover/focus restatement. Never the only home of a fact.
170	`InfoTip`	The ⓘ. Extra context that survives touch, because it opens on press.

2. Cards — 10 →

#	Component	One line
14	`BalanceCard`	The hero: one trusted number.
15	`KpiCard`	Metric + delta + optional sparkline.
16	`AccountCard`	Bank account with available vs. current.
17	`PaymentMethodCard`	The physical card object. 3D flip, pointer tilt.
18	`RunwayCard`	Months of runway with a burn line.
19	`InvoiceCard`	Invoice summary with aging state.
20	`SubscriptionCard`	Recurring charge with next-billing.
21	`AnomalyCard`	A flagged deviation with its explanation.
22	`GoalCard`	Target vs. actual with a progress rule.
23	`StatCard`	The minimal label+value card.

3. Payments — 14 →

#	Component	One line
24	`AmountInput`	The hardest input in fintech.
25	`CurrencySelect`	Searchable, with recents.
26	`PayeeSelect`	Recipient picker with fuzzy search and last-paid.
27	`PaymentForm`	Amount → payee → method → date → memo.
28	`PaymentMethodList`	Selectable method cards.
29	`CheckoutSummary`	Itemized total with fees and tax.
30	`ConfirmPaymentDialog`	Amount, destination, timing. Hold-to-confirm.
31	`PaymentStatusTimeline`	Submitted → sent → settled, with real timestamps.
32	`PaymentSuccess`	The sanctioned delight moment.
33	`ReceiptSheet`	Printable/shareable receipt.
34	`PayoutSchedule`	Upcoming payouts calendar.
35	`CardInput`	PAN / expiry / CVC with correct autocomplete.
36	`BankAccountInput`	Routing + account with checksum validation.
37	`RecurringSchedule`	Frequency, end condition, preview of next 3.

4. Swaps & FX — 9 →

#	Component	One line
38	`SwapWidget`	From/to with the flip. The signature component.
39	`RateLine`	A rate with its timestamp. Never one without the other.
40	`RateLock`	Locked rate with a countdown and expiry behavior.
41	`ConversionBreakdown`	Amount → fee → rate → recipient gets. Every line.
42	`CurrencyPairChart`	Rate history with a period selector.
43	`RateTicker`	Live multi-pair ticker with value flash.
44	`SlippageControl`	Tolerance setting with an explicit worst case.
45	`SwapRoute`	Multi-hop path visualization.
46	`FxExposure`	Position by currency with unrealized gain/loss.

5. Ledger & tables — 16 →

#	Component	One line
47	`TransactionTable`	The workhorse. Virtualized, sticky, priority-collapsing.
48	`TransactionRow`	Desktop row.
49	`TransactionCard`	The mobile re-rank.
50	`TransactionDetail`	Full detail sheet with attachments and audit trail.
51	`LedgerTable`	Double-entry with debit/credit columns and a balance check.
52	`AgingTable`	AR/AP buckets, 0-30-60-90+.
53	`ReconciliationView`	Two-pane matcher. The match animation.
54	`CategoryPicker`	Hierarchical with rule creation.
55	`FilterBar`	URL-param-backed filters with resolved-value chips.
56	`BulkActionBar`	Selection count + actions, safe-area aware.
57	`ColumnManager`	Show/hide/reorder with drag.
179	`GroupPicker`	One cut through a table, with subtotals per group.
58	`ExportMenu`	CSV/XLSX/PDF with a stated scope.
171	`TableColumns`	Sort and resize for a table that renders on the server.
172	`ColumnHeader`	The sortable, draggable header cell.
173	`PeriodGrid`	The ruled grid. Frozen panes, hidden columns, hover change, ⌘C.

6. Statements — 12 →

The largest gap in the market. Nothing else has these.

#	Component	One line
59	`StatementTable`	The shared shell: hierarchy, periods, rules.
60	`StatementRow`	Indent level, subtotal, total, expand.
61	`ProfitAndLoss`	P&L with period comparison and variance.
62	`BalanceSheet`	Assets / liabilities / equity, with the balance check.
63	`CashFlowStatement`	Operating / investing / financing.
64	`StatementToolbar`	Basis, period, comparison, currency, consolidation.
65	`PeriodPicker`	Fiscal-aware. Never assumes January.
66	`VarianceCell`	Absolute + percent + significance flag.
67	`FluxAnalysis`	Period-over-period explanations.
68	`DrilldownSheet`	Statement line → the GL entries behind it.
69	`TrialBalance`	All accounts with the debit=credit proof.
70	`CloseChecklist`	Tasks, owners, blockers, sign-off.

7. Dashboard & charts — 11 →

#	Component	One line
71	`DashboardShell`	Responsive grid with optional rearrange.
72	`KpiRow`	2–4 KPI cards with aligned baselines.
73	`MoneyChart`	Line/area with a money axis and negative-aware baseline.
74	`MoneyBarChart`	Grouped/stacked, zero-baseline origin, hatched negatives.
75	`WaterfallChart`	The P&L bridge. Essential and rare.
76	`CategoryBreakdown`	Ranked bars, not a pie.
77	`CashCalendar`	Daily heatmap of cash movement.
78	`CandlestickChart`	For FX/crypto pairs.
79	`ChartLegend`	Interactive, keyboard-navigable.
80	`ChartTooltip`	Touch-persistent readout.
81	`DataTableToggle`	Every chart's accessible table equivalent.

8. System & states — 9 →

#	Component	One line
82	`EmptyState`	Three variants. Always one next action.
83	`ErrorState`	With the financial reassurance sentence.
84	`Skeleton`	Structural, per-component.
85	`StaleIndicator`	Last-synced + retry.
86	`Toast`	Sonner, configured to our tokens.
87	`CommandPalette`	Motionless. Money-aware search.
88	`Sheet`	Vaul, configured. The mobile primary overlay.
89	`HoldToConfirm`	Irreversible actions, with accessible fallbacks.
90	`DensityToggle`	Persisted, synced, phone-clamped.

The domain layer

Model documented in docs/domain/. These are the families no other component library ships.

9. Accounting core (GL) — 18 →

#	Component	One line
91	`JournalEntry`	Debit and credit as two columns. No signed-column variant.
92	`JournalEntryForm`	Line grid with live balance check and dimension capture.
93	`JournalEntryTable`	All entries, with the gapless-numbering check.
94	`AccountPicker`	Shows the normal balance. Blocks non-postable accounts.
95	`ChartOfAccounts`	Hierarchy, statement mapping, unsupported-account flags.
96	`AccountRegister`	GL detail with a running balance.
97	`DimensionPicker`	Entity always required; renders what the account demands.
98	`AdjustingEntryForm`	Templated by type. Auto-reverse defaults on for accruals.
99	`RecurringEntryTemplate`	Template editable; instances read-only.
100	`EntryReversalDialog`	Hold-to-confirm. Never a delete.
101	`ScheduleTable`	One shell, seven presets. Prepaids through debt.
102	`RollForward`	Opening → movements → closing → tie. The universal shape.
103	`AccountTieOut`	Every BS account, proven against its evidence.
104	`SchedulePreview`	What the schedules will post, before they post.
105	`RevenueWaterfall`	Deferred balance recognizing by future period.
106	`DepreciationSchedule`	Book and tax in parallel. In-service date, not purchase date.
107	`LeaseSchedule`	ROU asset and liability on diverging curves.
108	`AllowanceRollForward`	With the methodology shown, not just the number.

10. Receivables (AR) — 13 →

#	Component	One line
109	`InvoiceForm`	With the revenue-recognition preview per line.
110	`InvoiceDetail`	Balance due as the hero, not total.
111	`InvoiceRegister`	Gapless-numbering check surfaced.
112	`CashApplication`	The highest-value screen in AR. Every case, not just the happy one.
113	`PaymentSuggestion`	Invoice combinations summing exactly to a lump sum.
114	`UnappliedCashPanel`	Never revenue; net credit balances flagged as liabilities.
115	`CreditNoteForm`	Distinct from a refund and from a write-off.
116	`CollectionsWorklist`	Promise-to-pay as a first-class object.
117	`DunningTimeline`	Per customer, not per invoice.
118	`CustomerStatement`	Printable. Print styles are first-class.
119	`CustomerCreditPanel`	Limit and exposure together, with hierarchy roll-up.
120	`SalesOrderTable`	Backlog, visually separated from ledger-derived numbers.
121	`ArMetricsPanel`	DSO with its method stated.

11. Payables (AP) — 16 →

#	Component	One line
122	`BillForm`	Per-line coding, required evidence, discount ROI surfaced.
123	`BillDetail`	Source document inline beside the coding.
124	`BillRegister`	Aging and approval state.
125	`DuplicateBillAlert`	Blocking. Duplicate payment is the most common AP loss.
126	`ThreeWayMatch`	Line-level variances, not header totals.
127	`MatchExceptionQueue`	The clerk's worklist.
128	`ApprovalChain`	Segregation of duties enforced. Approvals bind to a version.
129	`ApprovalInbox`	Mobile-first, document inline.
130	`PaymentRunBuilder`	Shows the cash balance remaining after the run.
131	`PaymentRunPreview`	Hold-to-confirm. Partial failure is a first-class state.
132	`CashRequirements`	Due in 7/14/30 vs. available, payroll broken out.
133	`VendorMaster`	Bank details versioned, never overwritten.
134	`BankDetailChangeAlert`	The fraud-prevention surface.
135	`ExpenseCapture`	Camera-first, policy violations shown at entry.
136	`CardTransactionMatch`	Matched to receipts, never re-entered.
137	`UninvoicedReceiptsReport`	GR/IR aging. The evidence for the period-end accrual.

12. Close, controls & consolidation — 24 →

#	Component	One line
138	`PeriodStatus`	State, provenance, and the next action.
139	`CutoffWarning`	Inline, with both legitimate remedies named.
140	`CloseStatus`	The seven-section gated pipeline.
141	`AuditTrail`	Field-level diffs on every financial object.
142	`EvidencePanel`	Inline rendering, content hash, never deleted.
143	`IntegrityCheckPanel`	Eleven continuous assertions. A failure owns the screen.
144	`MaterialityPolicy`	Both thresholds must be exceeded. Threshold displayed.
145	`ApprovalPolicyEditor`	Separate-approver shown as fixed, not a toggle.
146	`RoleMatrix`	Controller ≠ Treasurer. Admin cannot transact.
147	`SubsequentEventLog`	Adjusting vs. non-adjusting, decision recorded.
148	`RestatementBanner`	Marks a restated comparative everywhere.
149	`AuditorMode`	Read-only server-side, scope immutable, itself audited.
150	`SamplingTool`	Method and seed recorded — reproducible selection.
151	`EvidenceBundle`	Entries + documents + approvals + trail, with a manifest.
152	`EntitySelector`	Explicit scope. Standalone vs. consolidated visually distinct.
153	`ConsolidationView`	Entity columns, eliminations, NCI, group total.
154	`IntercompanyMatrix`	Must net to zero. Break types named.
155	`EliminationEntry`	Consolidation-level only, boundary visible.
156	`NciPanel`	On both statements.
157	`TranslationSummary`	Rates by type, with sources and methodology.
158	`CtaRollForward`	Its own equity line, never buried.
159	`FxRevaluation`	Monetary items only, derived from classification.
160	`FxGainLossPanel`	Realized and unrealized never combined.
161	`RateTable`	Rate type is not optional. A missing rate blocks.

See also: #69 TrialBalance and #70 CloseChecklist in statements — same family conceptually.

13. Metrics & analysis — 12 →

#	Component	One line
162	`MetricDefinition`	Every metric requires one. Formula with values substituted.
163	`NonGaapReconciliation`	EBITDA below net income, every adjustment named.
164	`MrrBridge`	The movement, not a single number with a percentage.
165	`BudgetVsActual`	Polarity-aware, materiality-filtered, versions tracked.
166	`ForecastTable`	Projections dashed and labeled everywhere.
167	`CovenantMonitor`	The contractual definition, not the generic one.
168	`KpiHealthStrip`	Provisional marking for pre-close numbers.
174	`RevenueTracker`	Revenue by stream, with mix, growth and concentration.
175	`ExpenseTracker`	Spend by category on three bases. Polarity derived per row from the sign convention.
176	`DriverModel`	The inputs a forecast is built from, and what they produce.
177	`ScenarioCompare`	Scenarios side by side, all measured against the base.
178	`PlByDimension`	The P&L cut by department, entity or product.

Build order

See roadmap. Summary: primitives → the money proof → the ledger core → the table → statements → the close → AR → AP → payments → swaps → dashboard → consolidation → polish.

The ledger core (family 9) comes before the statements, because a statement is a view over journal entries and building it the other way round produces a statement that can't drill down. The close (family 12) comes immediately after the statements, because the close is what the statements are for.