Skip to content
Specimen controls
Theme
Value colours
Row density
Family 5 · 15 of 16 components built

Ledger & tables in two columns.

The workhorse. 240 rows here, virtualised; one tab stop, arrows to navigate, and a total that is passed in rather than summed in the browser — a component that sums its own rows will eventually disagree with the backend, and the backend is right.

FilterBar · ExportMenu · ColumnManager · DensityToggle

A filter chip shows the resolved value — “1 – 30 Sep 2026”, never “Last 30 days”. An export states its scope, because exporting the page when the user expected the filtered set is a silent data error.

Period:1 – 30 Sep 2026Account:Operating cash ••4417Amount at least:$1,000.00240 results

TransactionTable

Virtualised with correct aria-rowcount and aria-rowindex. One tab stop for the whole grid; arrows navigate, Space selects, Enter opens, Escape clears. Sticky header, sticky total, no zebra striping — the tabular figures do the aligning. Group it from the toolbar above: each header carries its own count and subtotal, and keeps them when it collapses.

240 transactionsTotal14,302 US Dollar and 80 cents

TransactionCard

The phone presentation, and not a compromise: the amount stays right-aligned and tabular, the status stays legible, and the row is a single 44px-plus target.

  • 120 US Dollar
  • negative 199 US Dollar and 19 cents
  • negative 278 US Dollar and 38 cents
  • negative 357 US Dollar and 57 cents
  • 436 US Dollar and 76 cents

TransactionDetail

The audit trail names the actor and their role, and says when someone acted on behalf of someone else. The categorisation rule that fired is shown, because it is editable context.

LedgerTable

Debit and credit are two columns. Never one signed column. The totals are shown and the sign convention in force is stated, not assumed — and a group subtotals its debits and its credits separately, because netting them is the one thing two columns exist to prevent.

General ledger detail

Accrual basis · Acme Holdings, Inc. · USD · debits positive, credits positive, in their own columns

General ledger detail. Accrual basis · Acme Holdings, Inc. · USD · debits positive, credits positive, in their own columns
DateAccountDebitCredit
1200 Accounts receivable 21,840 US Dollar10,565 US Dollar and 60 cents
30 Sep1200 Accounts receivableINV-2041 Northwind Traders1,840 US Dollar
30 Sep1200 Accounts receivableACH receipt10,565 US Dollar and 60 cents
4000 Product revenue 10 US Dollar1,840 US Dollar
30 Sep4000 Product revenueINV-2041 Northwind Traders1,840 US Dollar
1010 Operating cash 110,565 US Dollar and 60 cents0 US Dollar
30 Sep1010 Operating cashACH receipt10,565 US Dollar and 60 cents
Totals12,405 US Dollar and 60 cents12,405 US Dollar and 60 cents
Debits equal credits.

TrialBalance

Two columns, each account in its normal-balance column, and the pair of totals shown side by side. If they do not agree the difference owns the screen.

Trial balance

As at 30 September 2026 · Acme Holdings, Inc. · accrual basis

Trial balance. As at 30 September 2026 · Acme Holdings, Inc. · accrual basis
AccountNormalDebitCredit
1010 Operating cashDr42,184 US Dollarzero
1200 Accounts receivableDr12,849 US Dollarzero
1210 Allowance for credit lossesCrzero964 US Dollar
1400 Prepaid expensesDr3,182 US Dollarzero
2010 Accounts payableCrzero8,421 US Dollar
3000 Common stockCrzero25,000 US Dollar
4000 Product revenueCrzero60,210 US Dollar
5000 Cost of revenueDr21,790 US Dollarzero
6000 Operating expensesDr14,590 US Dollarzero
Totals94,595 US Dollar94,595 US Dollar

Debits equal credits.

CommandPalette

Keyboard-initiated actions are motionless. The palette does not scale, fade or slide in — it is simply there, because motion after a keystroke is latency you can see.

Press the button, or ⌘K

The 15 components on this page

Each has a page with its four-layer spec, its dependencies, the whole source file and the one-line install. The family spec they were all built against is Ledger & tables.

1 more in this family are specified but not yet built, so they are not on this page: TransactionRow.

Works in your QuickBooks Online or Xero file

Get your books closed every month

Lopifi is building AI bookkeeping that keeps your books closed on US GAAP as transactions happen, with a CPA review every quarter, for $200 a month. We’re not open yet.

$200/month when we open. No card now.