Catalog
All 179 components, specified before they are written.
- Documents
- 14
- Components specified
- 179
- Component catalog179 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
- PrimitivesBuild these first. Everything above them inherits their mistakes. Specs for 15 React components: Money, Delta, Figure, Percent and 11 more.
- CardsAll cards: 24px radius, 24px inset, --surface on --canvas, 1px --border, no resting shadow. Specs for 10 React components: BalanceCard, KpiCard, AccountCard, PaymentMethodCard and 6 more.
- PaymentsPayments — specs for 14 React components: AmountInput, CurrencySelect, PayeeSelect, PaymentForm and 10 more.
- Swaps & FXThe governing rule for this entire family: A rate is a perishable fact. It never appears without a timestamp, and it is never transacted on without a lock. Specs for 9 React components: SwapWidget, RateLine, RateLock, ConversionBreakdown and 5 more.
- Ledger & tablesThe table is the product. It gets the same design investment as the hero card. Specs for 15 React components: TransactionTable, TransactionRow, TransactionCard, TransactionDetail and 11 more.
- StatementsThe largest gap in the market. No component library ships a <BalanceSheet />. This family is the reason Lopifi exists. Specs for 12 React components: StatementTable, StatementRow, ProfitAndLoss, BalanceSheet and 8 more.
- Dashboard & chartsWe wrap a charting engine (Recharts, or visx where more control is needed). We do not rebuild one. What we add is everything a chart library doesn't know about money. Specs for 11 React components: DashboardShell, KpiRow, MoneyChart, MoneyBarChart and 7 more.
- System & statesThe states that decide whether a product feels finished. Specs for 9 React components: EmptyState, ErrorState, Skeleton, StaleIndicator and 5 more.
- Accounting core (GL)The general ledger layer. Specs for 18 React components: JournalEntry, JournalEntryForm, JournalEntryTable, AccountPicker and 14 more.
- Receivables (AR)Receivables (AR) — specs for 13 React components: InvoiceForm, InvoiceDetail, InvoiceRegister, CashApplication and 9 more.
- Payables (AP)Payables (AP) — specs for 16 React components: BillForm, BillDetail, BillRegister, DuplicateBillAlert and 12 more.
- Close, controls & consolidationClose, controls & consolidation — specs for 24 React components: PeriodStatus, CutoffWarning, CloseStatus, AuditTrail and 20 more.
- Metrics & analysisMetrics & analysis — specs for 12 React components: MetricDefinition, NonGaapReconciliation, MrrBridge, BudgetVsActual and 8 more.
What each document covers
Component catalog
- 1. Primitives — 15 [→](01-primitives.md)
- 2. Cards — 10 [→](02-cards.md)
- 3. Payments — 14 [→](03-payments.md)
- 4. Swaps & FX — 9 [→](04-swaps-fx.md)
- 5. Ledger & tables — 16 [→](05-ledger-tables.md)
- 6. Statements — 12 [→](06-statements.md)
- 7. Dashboard & charts — 11 [→](07-dashboard-charts.md)
- 8. System & states — 9 [→](08-system-states.md)
- 9. Accounting core (GL) — 18 [→](09-accounting-core.md)
- 10. Receivables (AR) — 13 [→](10-receivables.md)
- 11. Payables (AP) — 16 [→](11-payables.md)
- 12. Close, controls & consolidation — 24 [→](12-close-controls-consolidation.md)
- 13. Metrics & analysis — 12 [→](13-metrics-and-analysis.md)
- Build order
Accounting core (GL)
- 91. JournalEntry
- 92. JournalEntryForm
- 93. JournalEntryTable
- 94. AccountPicker
- 95. ChartOfAccounts
- 96. AccountRegister
- 97. DimensionPicker
- 98. AdjustingEntryForm
- 99. RecurringEntryTemplate
- 100. EntryReversalDialog
- 101. ScheduleTable
- 102. RollForward
- 103. AccountTieOut
- 104. SchedulePreview
- 105. RevenueWaterfall
- 106. DepreciationSchedule
- 107. LeaseSchedule
- 108. AllowanceRollForward
Payables (AP)
- 122. BillForm
- 123. BillDetail
- 124. BillRegister
- 125. DuplicateBillAlert
- 126. ThreeWayMatch
- 127. MatchExceptionQueue
- 128. ApprovalChain
- 129. ApprovalInbox
- 130. PaymentRunBuilder
- 131. PaymentRunPreview
- 132. CashRequirements
- 133. VendorMaster
- 134. BankDetailChangeAlert
- 135. ExpenseCapture
- 136. CardTransactionMatch
- 137. UninvoicedReceiptsReport
From here
The same material, reached the other way round — by the word, by the component, or by the thing running.
- DomainHow accounting actually works. The layer that makes this accounting software.Doc
- MotionThe decision framework, the tokens, the per-component specs.Doc
- 179 components specified hereThe catalog entry, the source, and the install line.Component
- The components, runningEvery implemented component on one set of pages, with real figures in it.Live