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.
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.
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.
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 addNo — 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.
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.)
Join the waitlist for founder pricing and first access when OnSystem opens.