# Choosing a React component library for finance software

> There are good dashboard kits, good data grids and good fintech templates. There is very little that knows what a currency is. This is the honest comparison, including where you should not use this one.

Source: https://lopifi.com/docs/guides/05-choose-a-finance-component-library
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

# Choosing a React component library for finance software

There are good dashboard kits, good data grids and good fintech templates. There is very little that knows what a currency is. This is the honest comparison, including where you should not use this one.

---

## The question to ask first

Not "does it look like finance". Ask it to render this:

```tsx
<Money value={null} />
```

A dashboard kit prints `$0.00`, or `NaN`, or nothing. Those are three different bugs and all three ship. A finance-native component prints `n/a`, because it knows the difference between a number it has and a number it does not — and that distinction is the one that costs money in an accounting product.

Four more, in the same spirit:

1. Render `JPY 1200`. Does it print `¥1,200` or `¥1,200.00`?
2. Put `(1,234.00)` and `9,876.00` in one right-aligned column. Do the decimal points line up?
3. Render a `−4.2%` change in **burn**. Is it green?
4. Render a journal entry. One signed column, or two?

A library that passes all five is not necessarily better designed. It has just been used against a general ledger before.

## What is out there

| Project | What it is | Where it stops |
|---|---|---|
| [shadcn/ui](https://ui.shadcn.com/) | The distribution model and base primitives | Deliberately domain-agnostic. It is the foundation here, not the competitor — this registry consumes it through `registryDependencies`. |
| [Tremor](https://tremor.so/) | React dashboard components, charts and KPI blocks | Closest in spirit, and genuinely good. But dashboard-native, not finance-native: no accounting negatives, no statement rules, no multi-currency, no ledger semantics. |
| [ReUI](https://reui.io/) | 1,000+ free shadcn components across 60+ categories | Breadth over depth. Generic data grid, generic cards. Nothing knows what a currency is. |
| Fintech dashboard templates | Finished apps you fork and gut | A template, not a system. Fork-and-diverge rather than install-and-compose; no money primitive and no statements underneath the layout. |
| [Shadcnblocks](https://www.shadcnblocks.com/) | Paid fintech and payments blocks | Marketing-page sections — hero, pricing, feature grid — with a fintech skin. Almost no product surface. |
| [Recharts](https://recharts.org/) / [visx](https://airbnb.io/visx/) | Charting engines | Correct choice, wrap them. Neither knows about negative-aware baselines, money axes or fiscal periods. |
| [Actual Budget](https://actualbudget.org/), [Firefly III](https://www.firefly-iii.org/) | Full open-source finance apps | Real financial correctness, zero reusability — the UI is welded to their own domain model. |

The pattern is consistent: finance **templates** exist in quantity; a finance **primitive system** mostly does not.

## The gap, stated precisely

Across the whole list, seven things are missing:

1. **A money primitive** — minor-unit storage, per-currency decimals, accounting negatives, `null`/`0`/redacted as distinct states.
2. **Financial statement components** — P&L, balance sheet, cash flow, with hierarchy, rollups, period columns, variance, drill-down and correct rule lines. The largest hole: not one library ships a `<BalanceSheet />`.
3. **Reconciliation UI** — two-pane matching, confidence scoring, bulk match. Every accounting product rebuilds it from scratch.
4. **FX primitives** that treat a rate as a perishable, timestamped fact rather than a number.
5. **Typographic accounting conventions** — case-shifted parentheses, single and double rules, em-dash nil.
6. **A motion doctrine** where the frequency of an interaction decides whether it animates at all.
7. **Designed responsive collapse for dense tables** — not `overflow-x: auto`.

## When you should not use this

Stated plainly, because a comparison that recommends itself in every case is an advertisement.

- **You are building a marketing site for a fintech.** These are product surfaces. Use a blocks library.
- **You need a generic admin CRUD app** and money is one field among forty. A general kit will be faster and you will not miss the ledger semantics.
- **You want a finished application to fork.** This is a set of primitives you compose. A template will get you a demo sooner.
- **You are locked to a component framework** — MUI, Mantine, Chakra. These are Tailwind and shadcn-shaped, and porting them costs more than the correctness is worth to you today.

## When you should

- The interface will show a general ledger, a statement, a close, an AR or AP workflow, or multi-currency anything.
- An accountant will look at it and form a judgement in the first four seconds.
- You are prompting an AI agent to build accounting screens and need it to compose primitives that already encode the rules rather than invent formatting per screen — which is the whole argument of [vibe accounting](/vibe-accounting).

## What this borrows rather than rebuilds

Distribution from shadcn/ui — `registry.json`, namespaced installs, copy-paste ownership. Charting from Recharts. Accessible behaviour from Base UI or Radix; nobody should hand-roll a combobox. Toasts from Sonner, drawers from Vaul, both already reference implementations of the motion doctrine here.

The differentiation is not "more components". It is that the formatting rules are inside the component instead of being the consumer's problem, and that the statements exist at all.

---

## Judge it yourself

- [Every implemented component, rendering](/showcase) — with theme, density, greyscale and reduced-motion switches, which is where a correctness claim is actually testable
- [The catalog](/components) — 179 components, each with its spec, dependencies and full source
- [Prior art](../03-prior-art.md) — this comparison as an internal document, with the re-check cadence
- [Product teardowns](../04-product-teardowns.md) — Ramp, Mercury, Brex, Rho, Numeric, Digits, Xero, NetSuite, at the level of behaviour
- [The manifesto](../01-manifesto.md) — the non-goals, which are the useful half