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.
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.
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.