Drop-in components for the screens AI coding tools build badly, screen-type by screen-type. Same locked design tokens, same AI context pack, same npx shadcn add install — starting with Internal Tools and Fintech, more verticals on the way.
Every kit shares the same semantic tokens, the same 5 themes, and the same AI context pack — buy the one that matches the screens you're building.
| Shipment | ERT | Status |
|---|---|---|
| CG-8213 | 6h | Delivered |
| CG-8216 | 52h | Sync failed |
Data tables, CRUD forms, dashboards, permission-gated views — the internal-ops screens AI tools ship as generic and marketing-flavored by default.
| Date | Merchant | Amount |
|---|---|---|
| Jul 14 | Rent | $1,450.00 |
| Jul 12 | Whole Foods | $86.40 |
Masked balances, reconciled transaction lists, invoice generation, transfer confirmation, honest live-vs-demo data — for the screens where trust matters most.
We audit real vibe-coded apps screen-type by screen-type — internal ops dashboards, then fintech apps — and the mistakes aren't random. Each kit is built to make its vertical's version of these impossible.
Icons and deltas colored for variety, not meaning — including the same fake "+4.5%" repeated on every tile regardless of whether it's actually up. Every kit locks color to five semantic roles: good, bad, warning, info, neutral.
Mixed decimal formatting in the same column, "recent" lists that aren't actually sorted. Shared currency/percent/decimal formatters and an enforced sort order, everywhere a number appears.
Sample data forever — no loading, empty, or error states, and (in fintech) a static demo feed labeled "LIVE" with no disclosure. Every OnSystem data component ships all its states, and real-time components require a live-vs-demo badge.
A public "About / Products / News" navbar bolted onto an internal ops table or a banking dashboard. OnSystem's app shell is structurally impossible to confuse with a marketing site.
Columns labeled with unexplained abbreviations, or three different balance-masking patterns in one app. Header tooltips, value-based emphasis, and one consistent masked-value component ship by default.
Six filters crammed into one row until the search clips mid-word, or icon-only buttons with no label on a real account action. OnSystem's filter bar measures and collapses overflow; icon controls require a label or tooltip.
Every color, size, and radius routes through the same five-role token scale across every kit — never a raw palette class, never a decorative hue.
Light, Dark, Berlin Nights, Sunny California, Console 47 — all WCAG-AA audited, shared by every kit. Switch the whole system with a single class.
A rules file for Cursor, Claude Code, v0, Bolt, or Lovable, tuned to the kit you buy, so every new screen your AI builds stays on-system automatically.
npx shadcn add — the exact workflow you already use for free components, pointed at your licensed kit's registry. Updates appear automatically.
Internal Tools ships data tables, forms, and dashboards. Fintech ships masked balances, transaction lists, and transfer flows. Each kit is self-contained — no cross-purchase required.
One-time purchase per kit. Perpetual access and free updates as conventions evolve.
A theme is a single class on your <html> — color, corner radius, and fonts all repaint, and nothing else changes. Shared by every kit, all five ship WCAG-AA audited. Click through them:
| Shipment | ERT | Failure rate |
|---|---|---|
| CG-8213 | 6h | 5% |
| CG-8216 | 52h | 64% |
| CG-8218 | 26h | 19% |
Every color stays semantic across all five, in every kit — a 64% failure rate reads as danger whether it's on cream or a Commodore-blue console. That's the whole point: the meaning never moves, only the mood.
One checkout, one license key for that kit — delivered instantly along with its AI context pack.
Add one block to your components.json with your key. That's the whole setup, for either kit.
Run npx shadcn add @onsystem-internal-tools/DataTable or @onsystem-fintech/TransactionList — it pulls the component and its whole dependency tree into your project.
Component kits 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 generates on-system UI from then on, without you re-explaining the rules each time.
Each kit is licensed separately today — buy just the one you need, or both. A combined-bundle price is being considered for later; join the waitlist and we'll let you know if one ships.
Internal Tools covers ops/back-office screens: data tables, CRUD forms, dashboards, permission-gated views. Fintech covers money-specific screens: masked balances, transaction lists, invoice generation, transfer confirmation, live-vs-demo pricing. Both share the same tokens, themes, and install workflow.
No — each is fully self-contained. If a Fintech component needs an Internal Tools primitive (like DataTable or Button), it installs automatically with your Fintech license at no extra cost.
No — that's the point. OnSystem makes the design decisions for you through a locked token system, and the AI context pack keeps your AI assistant making the same decisions on every new screen.
Through a private registry you install with the shadcn CLI you already use: npx shadcn add @onsystem-<kit>/<component>. Your license key unlocks your kit. 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, per kit. You get perpetual access and free updates to whichever bundle(s) you buy.
Join the waitlist for founder pricing and first access — tell us which kit(s) you're after once we're live.