A design system that scales with data.
Enterprise interfaces do not break at 50 rows. They break at 50 thousand. Oshon is an enterprise React design system and data grid built around one idea: components should adapt their experience to data density. I designed it, built it, and shipped it alone, in partnership with Claude AI.
Every enterprise team designs the same six things. Slowly.
Global header, navigation, page toolbar, content panels, filter rails, dashboard widgets. Most enterprise teams spend their first months assembling these from shadcn, MUI, and AG Grid, gluing three libraries together and sanding the seams. The design system work happens before a single unit of product value ships.
And even when the assembly is done, there is a deeper failure mode: the table that looked beautiful in the Figma file with 50 rows collapses in production with 50 thousand. Pagination bolted on. Virtualization retrofitted. A custom rewrite when the data outgrows the first attempt.
Density is the variable design systems ignore.
Design systems version by brand and by platform, but almost never by data volume, the one variable that changes everything about an enterprise interface. Oshon treats density as a first-class design token. One component, six quantized regimes. Pass a density prop, and the component picks the right experience for the size of the data underneath it.
The six data regimes. The same DataTable component serves all of them without re-architecting.
Free gets you primitives. Enterprise needs a system.
shadcn/ui, MUI, and AG Grid are excellent at what they are: a component kit, a widget library, a grid. None of them is an enterprise system. Choose the free stack and you still reconcile three visual vocabularies and three theming models, design every app shell yourself, and retrofit the table when the data outgrows the first build. The price of free is paid in integration and rewrites.
| shadcn/ui | MUI | AG Grid | Oshon | |
|---|---|---|---|---|
| Density-adaptive components, six data regimes | – | – | – | ✓ |
| Pre-designed enterprise app shells | – | – | – | ✓ |
| Data grid to 1M rows | – | paid tier | ✓ | ✓ |
| One system, one theming model, no gluing | partial | partial | – | ✓ |
| Token layer designed as a contract for AI tools (Claude, Cursor) | – | – | – | ✓ |
| First screens imported, not designed | – | – | – | ✓ |
✓ included · partial: exists but you assemble or configure it · – not offered
The argument is not that primitives are bad. It is that assembling them is the slowest, most expensive part of every enterprise build, and it produces a system no one designed on purpose. Oshon starts where the assembly ends: one designed language, density handled, first screens ready on day one.
Designed in Figma first. Every pixel intentional.
Oshon began as a fully proprietary visual language in Figma: every component, every state, every density variant drawn before a line of code existed. The system ships as 50+ production-ready components and six complete app shells, so a team imports its first screens instead of designing them. And because every visual decision lives in a machine-readable token layer, Oshon is AI-native: point Claude, Cursor, or any coding agent at the system and generated screens come out on-system by default. The tokens are not documentation for humans to remember. They are a contract the AI cannot violate.
Enterprise-grade, TypeScript-native, themed by an AI-readable token layer.
Header, navigation, toolbar, panels, filter rail, dashboard widgets. The structural six, pre-designed.
50 rows to a million through the density prop. No rewrites at scale.
Accessibility as a constraint from the first frame, not an audit at the end.
One designer, one AI, production software.
Oshon is also an argument about how design works now. I did not hand specs to an engineering team. I directed Claude AI through every build decision, reviewing generated code the way a design director reviews work: against the Figma source, against the interaction spec, against taste. The craft did not leave the process. It moved up a level.
Component and density variants drawn in Figma.
Intent, constraints, and edge cases briefed to Claude.
Claude builds components, tests, and docs.
Every output judged against the Figma source and spec.
Merged, versioned, live on oshon.ai.
Live, in public beta, built by one person.
Oshon is live at oshon.ai in v1.0 public beta, aimed at data-heavy enterprise verticals including real estate, law, media, and supply chain. It is the proof behind the claim on my homepage: I don't just design products. I ship them.