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.
Masked value, account summary, transaction list, category breakdown, invoice generator, transfer flow (with confirmation friction), live price chart, live-data badge, and a money-specific error state — plus the shared numeric-formatting primitives they all consume.
Button, FormField, FormSection, ConfirmDialog, FilterBar, DataTable, and StatCard carry over unchanged — the same registry auto-installs whichever of those 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.
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.
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.
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.
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.
Join the waitlist for founder pricing and first access when the Fintech kit opens.