Drop-in components for the screens AI coding tools get wrong when real money is on-screen — masked balances, reconciled transaction lists, honest live-vs-demo data, invoice math that never drifts, and transfer flows that ask before they move money. Same token system and AI context pack as OnSystem's Internal Tools kit.
| Date | Merchant | Amount | Status |
|---|---|---|---|
| Jul 12 | Whole Foods | $86.4 | Posted |
| Jul 9 | Payroll | 2500 | Posted |
| Jul 14 | Rent | $1,450.00 | Posted |
| Date | Merchant | Amount | Status |
|---|---|---|---|
| Jul 14 | Rent | $1,450.00 | Large debit |
| Jul 12 | Whole Foods | $86.40 | Posted |
| Jul 9 | Payroll | $2,500.00 | Posted |
Same accounts, same data. One masks nothing, mixes decimal formats, shows an identical "↑4.5%" on every tile, and labels a demo feed "LIVE." The other masks balances by default, sorts and formats every number the same way, and only says "live" when it's telling the truth.
We audited real vibe-coded fintech dashboards (loan tracking, expense management, banking, invoicing, live pricing) the same way we audited internal tools for kit #1. The mistakes weren't random.
An unhandled error leaks a stack trace over a half-finished transfer. OnSystem ships a calm error boundary by default — reassuring copy, a retry affordance, never a raw dev overlay.
Every stat tile shows an identical fake "+4.5%," regardless of whether it's actually up. Locked to the same five semantic roles as kit #1 — a delta is only colored when it's a real, computed direction.
"$6,365.50" next to "$22,363" in the same column, a "recent transactions" list that isn't sorted by date. Shared currency/percent/decimal formatters plus an actually-enforced sort order fix both.
A progress bar or badge with no stated min/max or comparison point — is 60% good? OnSystem's progress component requires a labeled scale, every time.
A static demo feed labeled "LIVE" with no disclosure. Every real-time-styled OnSystem component ships a demo-vs-verified-live badge as a required prop, not an afterthought.
Some balances are masked, some aren't, with three different reveal interactions across one app. One masked-value component, one reveal/hide pattern, everywhere.
Money (a figure that refuses to render without a currency, takes its precision from the currency itself, and derives its sign from the direction of the movement), account summary with per-currency totals it computes rather than accepts, transaction list with a running balance and closing figure derived from the movements in minor units, category breakdown, invoice generator, transfer flow with confirmation friction, live price chart, and a progress scale.
Button, FormField, FormSection, ConfirmDialog, FilterBar, DataTable, StatCard, AppShell, ActivityFeed, masked value, live-data badge and a money-specific error state carry over unchanged, and the same registry auto-installs whichever your fintech components need, no separate purchase required.
Light, Dark, Berlin Nights, Sunny California, Console 47 — the exact same WCAG-AA audited theme layer as kit #1. Switch the whole system with a single class.
A rules file for Cursor, Claude Code, v0, Bolt, or Lovable, tuned for money-screen conventions — masking, reconciliation, live-data disclosure — so every new screen your AI builds keeps them.
npx shadcn add — the exact workflow you already use for free components, pointed at your licensed fintech registry.
The same registry works with Claude Code, Cursor, and any other MCP-enabled assistant — no extra setup. Run npx shadcn@latest mcp init once, then ask it to add TransactionList, AccountSummary, or any component by name.
One-time purchase. Perpetual access and free updates to the bundle as fintech-UI conventions evolve.
One checkout, one license key — delivered instantly along with the AI context pack. One license covers everyone at your company.
Add one block to your components.json with your key. That's the whole setup.
Run npx shadcn add @onsystem-fintech/TransactionList — it pulls the component, the primitives it composes (FilterBar, DataTable), and the shared lib automatically.
npx shadcn@latest mcp init wires Claude Code or Cursor up to the same registry from step 2 — no separate setup.Component libraries fix the screen you're on. OnSystem's AI context pack fixes every screen you build next — feed it to your AI coding tool and it keeps masking balances, reconciling numbers, and disclosing demo data correctly from then on.
npx shadcn addAlready have — or want — the Internal Tools kit too? See the Internal Tools kit →
No — the Fintech kit is fully self-contained. Any Internal Tools primitive a fintech component needs (Button, FilterBar, DataTable, StatCard, etc.) installs automatically with your fintech license, at no extra cost.
Through a private registry you install with the shadcn CLI you already use: npx shadcn add @onsystem-fintech/<component>. Your license key unlocks it. Updates appear automatically — no re-downloads. It's also MCP-ready — run npx shadcn@latest mcp init once and ask Claude Code or Cursor to add a component by name instead.
Yes. The license belongs to your company, not to whoever paid. Every employee and contractor working on your company's products can use it, on any number of machines. There are no seats to buy and no headcount tiers. This applies retroactively to every purchase ever made. Here are the full terms.
For products your company owns and operates, including ones you run for clients as a service, yes. What one license does not cover is a deliverable you hand over for the client to own and run themselves; that client needs their own license. If your arrangement sits between those, email me and I will give you a straight answer. See the full terms.
Cursor, Claude Code, v0, Bolt, and Lovable — anywhere you can supply a rules file or project context.
React + TypeScript + Tailwind, built on shadcn/ui conventions. The components are dependency-free portable .tsx — your code, no runtime lock-in.
One-time. You get perpetual access and free updates to the bundle.
No — this is a UI component library. It fixes how a screen presents money-related data (masking, formatting, disclosure); it doesn't provide financial, legal, or compliance guidance.
Your license key, fintech context pack, and components arrive the moment you buy.