# Component catalog

> 179 components across 13 families, specified across accounting and finance UI — from money primitives to the close, controls and consolidation. Not every one is built yet; each component page says whether it is implemented or spec only.

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

---

# Component catalog

**179 components across 13 families,** specified across accounting and finance UI — from money primitives to the close, controls and consolidation. Not every one is built yet; each component page says whether it is 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 this stops being a component kit and starts being accounting software.

---

## 1. Primitives — 15 [→](https://lopifi.com/md/docs/catalog/01-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. |
| 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 [→](https://lopifi.com/md/docs/catalog/02-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. |

## 3. Payments — 14 [→](https://lopifi.com/md/docs/catalog/03-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/04-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 — 16 [→](https://lopifi.com/md/docs/catalog/05-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.  |

## 6. Statements — 12 [→](https://lopifi.com/md/docs/catalog/06-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. |

## 7. Dashboard & charts — 11 [→](https://lopifi.com/md/docs/catalog/07-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/08-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/09-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/10-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, 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 [→](https://lopifi.com/md/docs/catalog/11-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 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 [→](https://lopifi.com/md/docs/catalog/12-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 — 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](https://lopifi.com/md/docs/catalog/06-statements) — same family conceptually.

## 13. Metrics & analysis — 12 [→](https://lopifi.com/md/docs/catalog/13-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. 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](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 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*.