Drop-in components for the screens AI coding tools build badly — data tables, dashboards, CRUD forms, permission-gated views. Plus an AI context pack that keeps every new screen your AI generates on-system, automatically.
| ID | ERT | COL | Fail | Status |
|---|---|---|---|---|
| CG-8213 | 6h | — | 5% | Delivered |
| CG-8216 | 52h | — | 64% | Sync failed |
| CG-8218 | 26h | — | 19% | Transit |
| CG-8220 | 41h | — | 31% | Delayed |
| Shipment | ERT ⓘ | Failure rate | Status |
|---|---|---|---|
| CG-8213 | 6h | 5% | Delivered |
| CG-8216 | 52h | 64% | Sync failed |
| CG-8218 | 26h | 19% | In transit |
| CG-8220 | 41h | 31% | Delayed |
Same data, same functionality. One reads as a coherent product — semantic color, a real app shell, defined column meanings, emphasis where it matters. The other is what "make me a dashboard" gives you.
We studied real vibe-coded dashboards. The mistakes weren't random — they were the same handful, over and over. OnSystem is built to make each one impossible.
Stat icons in green, blue, orange, pink — meaning nothing. A "14 pending" tile screaming alarm-red for no reason. OnSystem locks color to five semantic roles; if it's not good / bad / warning / info / neutral, it's gray.
Four stat cards, four different secondary-text formats, impossible to scan as a set. Every OnSystem stat card shares one fixed slot contract — only the values change.
Six filters crammed into one row until the search button clips mid-word. OnSystem's filter bar measures itself and collapses the overflow into "More filters," live.
Columns labeled "ERT / COL / CRT" with no way to know what they mean, and a 64% failure rate in the same plain text as a 5% one. OnSystem ships header tooltips and value-based emphasis by default.
A public "About / Products / News" navbar bolted on top of an internal ops table. OnSystem's app shell is structurally impossible to confuse with a marketing site.
Sample data forever — no loading, empty, or error states. Every OnSystem data component ships all three, not just the screenshot-ready one.
App shell, data table, filter bar, CRUD forms, record detail, permission gating, activity feed, settings, confirm dialogs, stat cards — the real internal-tool patterns, not marketing-site filler.
Light, Dark, Berlin Nights, Sunny California, Console 47 — all WCAG-AA audited. Switch the whole system with a single class; color, radius, and fonts all repaint.
A rules file for Cursor, Claude Code, v0, Bolt, or Lovable. Feed it once and every new screen your AI builds stays on-system — the real differentiator.
npx shadcn add — the exact workflow you already use for free components, pointed at your licensed registry. Updates appear automatically, no re-download.
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 DataTable, AppShell, or any component by name.
Every color, size, and radius routes through a locked token scale. Extend the system without ever forking it or hardcoding a value.
One-time purchase. Perpetual access and free updates to the bundle as tool conventions evolve.
A theme is a single class on your <html> — color, corner radius, and fonts all repaint, and nothing else changes. 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 — 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 — 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/DataTable — 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 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 generates on-system UI from then on, without you re-explaining the rules each time.
npx shadcn addWorking with money screens too? See the Fintech kit →
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/<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. It's plain, tool-agnostic instructions.
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. (A subscription for future additional verticals will come later — this bundle is yours forever.)
Your license key, context pack, and components arrive the moment you buy.