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. Internal Tools, Fintech, and E-commerce today, with 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, or take All Access for all three.
| 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.
| Order | Status | Total |
|---|---|---|
| ORD-7829 | Completed | $245.00 |
| ORD-7825 | Cancelled | $312.80 |
Orders, inventory, variants and refunds: the merchant back office AI tools skip almost entirely while they build the shop window.
Every OnSystem kit (Internal Tools, Fintech, E-commerce) plus all kits released through 2027. One license key, one registry namespace, all components.
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.
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 a component by name.
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 any 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.
npx shadcn@latest mcp init wires Claude Code or Cursor up to the same registry from step 2 — no separate setup.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.
Every kit is a one-time purchase with perpetual access, no subscription. Buy the single vertical you're building for, or take All Access and get the other two plus everything I ship next.
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 disclosure. E-commerce covers the merchant back office: orders, inventory and stock thresholds, variant grids, and refund flows with totals that reconcile by construction. All three share the same tokens, the same 5 themes, and the same install workflow, so a shared component installs once even if you own more than one kit.
All three kits under one license key, plus every kit released through 2027 at no extra cost. If you're building across more than one vertical, or you don't yet know which vertical you'll need next, it costs less than three kits bought separately.
No — each is fully self-contained. If a Fintech or E-commerce component needs an Internal Tools primitive (like DataTable or Button), it installs automatically with that kit's license at no extra cost. Shared components install once even if you own several kits.
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. 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, per kit. You get perpetual access and free updates to whichever bundle(s) you buy.
One-time purchase, instant delivery, perpetual access and free updates.
Not building these screens yet? Get a note when new kits and updates ship: