---
title: "Component catalog"
description: "195 components across 14 families, covering accounting and finance UI from money primitives to the close, controls, consolidation, tax and compliance. Not every one is built yet; each component page says whether it's implemented or spec only."
canonical: "https://lopifi.com/docs/catalog/index"
---

# Component catalog

> 195 components across 14 families, covering accounting and finance UI from money primitives to the close, controls, consolidation, tax and compliance. Not every one is built yet; each component page says whether it's implemented or spec only.

Source: https://lopifi.com/docs/catalog/index
Part of: Lopifi — Planned: US GAAP books on autopilot, checked by a CPA (https://lopifi.com)

---

# Component catalog

**195 components across 14 families,** covering accounting and finance UI from money primitives to the close, controls, consolidation, tax and compliance. Not every one is built yet; each component page says whether it's implemented or spec only.

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 a component kit turns into accounting software.

---

## 1. Primitives — 16 [→](https://lopifi.com/md/docs/catalog/primitives)
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. |
| 180 | `CardNetworkMark` | Visa, Mastercard, Amex, Discover, JCB, UnionPay, Diners. One optical size, a text fallback. |
| 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 — 11 [→](https://lopifi.com/md/docs/catalog/cards)

| # | 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. |
| 181 | `CardStatement` | Statement balance, minimum due, due date, limit and available — the issuer's statement. |

## 3. Payments — 14 [→](https://lopifi.com/md/docs/catalog/payments)

| # | 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 [→](https://lopifi.com/md/docs/catalog/swaps-fx)

| # | 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 — 17 [→](https://lopifi.com/md/docs/catalog/ledger-tables)

| # | 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.  |
| 182 | `BankStatement` | Opening → lines with a running balance → closing, proven against the bank's own figure. |

## 6. Statements — 16 [→](https://lopifi.com/md/docs/catalog/statements)
**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. |
| 183 | `ReportHeader` | Entity, statement, period, basis, currency, as-of. Every figure states its basis. |
| 184 | `StatementOfChangesInEquity` | The fourth statement. Equity components across, movements down. |
| 185 | `StatementNotes` | Numbered notes, referenced from the line they explain. |
| 186 | `ReportingPackage` | A board or lender pack as one object: contents, basis, review state. |

## 7. Dashboard & charts — 11 [→](https://lopifi.com/md/docs/catalog/dashboard-charts)

| # | 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 [→](https://lopifi.com/md/docs/catalog/system-states)

| # | 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/`](../domain/). These are the families no other component library ships.

## 9. Accounting core (GL) — 18 [→](https://lopifi.com/md/docs/catalog/accounting-core)

| # | 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 [→](https://lopifi.com/md/docs/catalog/receivables)

| # | 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 is a first-class path. |
| 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 [→](https://lopifi.com/md/docs/catalog/payables)

| # | 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 one of the most common AP losses. |
| 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 [→](https://lopifi.com/md/docs/catalog/close-controls-consolidation)

| # | 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, so the selection is reproducible. |
| 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](https://lopifi.com/md/docs/catalog/statements). Conceptually they're the same family.

## 13. Metrics & analysis — 13 [→](https://lopifi.com/md/docs/catalog/metrics-and-analysis)

| # | 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, with polarity derived per row. |
| 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. |
| 187 | `RatioAnalysis` | Liquidity, leverage and efficiency ratios, each with its formula and inputs. |

## 14. Tax & compliance — 8 [→](https://lopifi.com/md/docs/catalog/tax-compliance)
The obligations around the books: what is due to whom, who has been verified, and which controls held.

| # | Component | One line |
|---|---|---|
| 188 | `ComplianceCalendar` | Filing deadlines by jurisdiction, with the owner and the date penalties start. |
| 189 | `SalesTaxSummary` | Taxable, exempt and collected by jurisdiction; the liability tied to the GL. |
| 190 | `TaxFormTracker` | Vendors over the reporting threshold, with W-9 and TIN-match state. |
| 191 | `TaxIdInput` | EIN, SSN, VAT and GST numbers with per-scheme format checks, masked at rest. |
| 192 | `VerificationStatus` | KYC/KYB requirements, each with its state and what is still due. |
| 193 | `SanctionsScreening` | A screening hit with list source, match strength and the reviewer's disposition. |
| 194 | `ControlTestResult` | Design and operating effectiveness, the sample, and every exception. |
| 195 | `PolicyAttestation` | Who has acknowledged which policy version, and who has not. |

---

## Build order

See [roadmap](https://lopifi.com/md/docs/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. Build it the other way around and the statement can't drill down. The close (family 12) comes right after the statements, because the close is what the statements are *for*.