Drop-in components for merchant admin: orders that tell you what you're actually looking at, empty states with a way out, stock bands that show the threshold behind the colour, variant grids with no silent gaps, and refund totals that cannot disagree with their line items. Same token system and AI context pack as OnSystem's other kits.
| Order | Customer | Total | Status |
|---|---|---|---|
| ORD-7823 | Jennifer Lee | $89.99 | Cancelled |
| Order | Customer | Total | Status |
|---|---|---|---|
| ORD-7823 | Jennifer Lee | $89.99 | Cancelled |
Same orders, same filter. One says "All Orders" while showing only the cancelled ones, mixes percentages with raw counts in a single tile row, and prints 456,370 as "45,6370." The other names the filter, says how many of how many you are seeing, labels every delta with its unit, and routes every number through one formatter. Both are real defects, found in a real store admin.
We audited AI-generated e-commerce back offices across two different tools, the same way we audited internal tools and fintech. One finding came before all the others: AI builds storefronts, not back offices. Storefront templates clear 500 forks; admin tops out at 66. The back office is where the defects live because it is where nobody is looking.
Search for something that isn't there and the table renders bare column headers over nothing. No message, no illustration, no way to clear the search. OnSystem's table ships two distinct empty states: "no matches for these filters," which echoes the filters and offers a way out, and "no records yet," which says so plainly.
Filter to Cancelled and the caption still reads "All Orders." The label and the data disagree, silently. Here the caption is composed from the active filters and the real row counts, so it cannot drift from what is on screen.
A tile claims 12,485 orders. The table shows eight, with no pager and no "showing 1 to 8 of 12,485." Pagination and a result count are not optional when the source is larger than the page.
A real store admin printed 456,370 as "45,6370." Elsewhere, profit appeared to exceed revenue because neither figure stated its period. Every amount routes through one formatter, and a tile that implies a window has to name it.
"+3.1%", "+12", "+45", "+2.8%" side by side, percentages and raw counts, none labelled. A delta declares its unit, so a count cannot masquerade as a percentage.
Three "width(-1) and height(-1)" warnings on first paint, because responsive charts sat inside parents with no resolved height. Every chart here renders into a frame with a real pixel height, resolved before the chart measures it.
Orders list and order detail, products list and product detail, inventory levels, refund flow, plus four primitives: stock status (which derives its band from the quantity and the reorder point, never a hand-set colour), money total (which has no total field, because it computes one), variant matrix, and chart frame.
Button, FormField, FormSection, Can, ConfirmDialog, FilterBar, DataTable, StatCard, ActivityFeed, AppShell and LockedIndicator carry over unchanged. The registry auto-installs whichever your e-commerce components need, with no separate purchase.
Light, Dark, Berlin Nights, Sunny California, Console 47: the exact same WCAG-AA audited theme layer as the other kits. Switch the whole system with a single class.
A rules file for Cursor, Claude Code, v0, Bolt, or Lovable, tuned for merchant-admin conventions: filter-bound captions, real empty states, stated stock thresholds, totals that reconcile. Every new screen your AI builds keeps them.
npx shadcn add, the exact workflow you already use for free components, pointed at your licensed e-commerce registry.
The same registry works with Claude Code, Cursor, and any other MCP-enabled assistant, with no extra setup. Run npx shadcn@latest mcp init once, then ask it to add OrdersList, VariantMatrix, or any component by name.
One-time purchase. Perpetual access and free updates to the bundle as merchant-admin 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-ecommerce/OrdersList. It pulls the component, the primitives it composes (DataTable, FilterBar), and the shared lib automatically.
npx shadcn@latest mcp init wires Claude Code or Cursor up to the same registry from step 2, with 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 captions bound to filters, empty states real, and totals reconciled from then on.
npx shadcn addBuilding across more than one vertical? All Access bundles all three kits for $499.99, which is $99.98 less than buying them separately.
No. The E-commerce kit is fully self-contained. Any shared primitive an e-commerce component needs (Button, FilterBar, DataTable, StatCard and the rest) installs automatically with your e-commerce license, at no extra cost.
Through a private registry you install with the shadcn CLI you already use: npx shadcn add @onsystem-ecommerce/<component>. Your license key unlocks it. Updates appear automatically, with 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, not a storefront integration. The components take your data as props, wherever it comes from. What they guarantee is how that data is presented: filters named, empty states real, totals reconciled.
Your license key, e-commerce context pack, and components arrive the moment you buy.