Arena by Dravensoft

One design system, in React and in Angular, from one contract.

One ArenaButton under three style plugins, with the API and behaviour contracts pointing at it

Every value traces to a design token, every component's API and every accessibility pattern it binds is a contract file rather than a paragraph, and a gate holds the code, the documentation and the published packages to those contracts. An agent handed this system does not guess at it: it reads the contract that governs what it is about to write, and the gate tells it when it got it wrong.

Arena carries the language and not the skin. The same 73 components ship under both framework names, rendering the same pixels, and your palettes and fonts arrive in an arena.config.json your project writes.

bun add @dravensoft/arena-react     # or @dravensoft/arena-angular
bun add @phosphor-icons/web

See it

Benches

Products drawn twice, once under React and once under Angular, each pair from one arena.config.json and one style plugin of its own. What a pair shows is that project's appearance rather than Arena's, and both halves are applications you can use rather than pictures of them.

Every half installs Arena 11.0.0 from the registry rather than reading the repository that publishes this page, so a pair draws a released Arena and a fix made after that release reaches it at the next one.

Opening both halves of a pair at once is the comparison, and that is a local act: clone them and run one command.

Take it