All 179 components.
- Components
- 179
- Implemented
- 125
- Families
- 13
- Registry
- @lopifi
Step 1 — once
Point components.json at the registry.
{ "registries": { "@lopifi": "https://lopifi.com/r/{name}.json" } }Step 2 — per component
Install by name. Source and all, into your repository.
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/balance-cardAgents can skip the file entirely and connect to the MCP server, which serves the same 179 entries with their source.
Design layer
Primitives, surfaces, tables, charts. The parts a generic UI kit also claims to have — built here around money that can be negative, null, or in a currency with three decimal places.
The layer everything else composes. Build these first; nothing above them is right until they are.
**The largest gap in the market.** Nothing else has these.
---
Domain layer
The general ledger, receivables, payables, the close, controls, consolidation and metrics. This is where the system stops being a component kit and starts being accounting software.
**See also:** `#69 TrialBalance` and `#70 CloseChecklist` in [statements](06-statements.md) — same family conceptually.
---
Common questions
What is Lopifi?
Lopifi is a React component system for accounting and finance interfaces: 179 components across 13 families, from money primitives and ledger tables to financial statements, the month-end close and controls. Each one is specified before it is written, and the spec ships with it.
How do I install a Lopifi component?
Point `components.json` at the registry once — `{ "registries": { "@lopifi": "https://lopifi.com/r/{name}.json" } }` — then run `npx shadcn@latest add @lopifi/balance-card` for each component you want. The source lands in your repository and you own it; there is no runtime dependency on this site.
What makes an accounting component different from a generic UI component?
A card with a currency symbol is not an accounting component. These know that money is a minor-unit integer plus a currency code, that a negative can be a parenthesis or a minus depending on the statement, that zero, null, unknown, redacted and loading are five distinct renders, and that every figure has an entity, a basis, a period and an as-of date.
Can I use these components with an AI coding agent?
Yes — that is what they are for. The MCP server at https://lopifi.com/api/mcp exposes all 179 components with their source and specs, so an agent installs a correct component instead of generating a money primitive from scratch.
Told when a component lands
125 of 179 are built. One email when the rest ship, family by family — and when one of them changes in a way that needs a migration note.