Arena by Dravensoft

Arena is an open-source design system from Dravensoft that ships the same 73 components in React and in Angular, generated from one shared contract. The two packages render identical pixels and expose identical component APIs, so a team running both frameworks, or migrating between them, can stop maintaining two design systems that slowly drift apart.

The problem it's built around is the divergence that happens whenever a design system exists twice. The React version gets a fix, the Angular version gets it a month later or never, tokens are copied by hand, and accessibility behaviour quietly differs between the two. Arena's answer is to make the contract the source of truth. Design tokens, API contracts and accessibility patterns live in contract files rather than in documentation, and both framework packages are derived from them.

In practice you install @dravensoft/arena-react or @dravensoft/arena-angular from npm, with bun add or the package manager you prefer, and describe your product's appearance in an arena.config.json file plus a style plugin. The components sit on a shared Tailwind layer, and the README's own phrase for the split is that Arena carries the language and never the skin. Every styling question resolves to a design token, so there are no hex values or bare pixel numbers in the codebase, and a project's look is a config change rather than a fork. Fonts are self-hosted with no CDN dependency, and the icon set is Phosphor Icons. Accessibility is declared per component and checked by automated validation rather than left to convention. The repository also ships an MCP server and a Claude Code plugin, so an AI coding agent can read the contract that governs what it's about to write before it writes it, which is a sensible way to keep generated UI code inside the system instead of beside it.

Getting started is ordinary front-end work. You add the package for your framework, write an arena.config.json that names your tokens, and attach a style plugin that turns those tokens into the skin, then import components as you would from any library. The kitchen sink pages are the quickest way to see all 73 components under your config, and the benches are the place to look when you want to know how a real product screen, a scheduling calendar, a task board, a language lesson, a storefront, comes together from the same parts. Because the components sit on a Tailwind layer, they drop into a Tailwind project without a second styling system fighting for control.

It's aimed at front-end teams who need one visual language across React and Angular, whether that's a company with products on both stacks, an agency that inherits both, or a migration that will take a year. To show the system holds up at application scale, Dravensoft publishes eight templated reference products it calls benches, including takes on Calendly, ClickUp, Duolingo, Etsy, Grafana, Instagram, Notion and Superhuman, each built in both frameworks, along with a kitchen sink page for each framework that exercises every component.

What sets it apart from the big component libraries is the contract-first, dual-framework design rather than any single widget. Most libraries pick a framework and port later if at all. Arena treats the two packages as outputs of one specification, and its token-only styling rule is stricter than most. The limits are equally clear. It's React and Angular only, so Vue and Svelte are out. The GitHub repository is small in community terms, and the project is at version 11 with a rapid release cadence, which means breaking changes between majors are a real possibility. Adopting the token discipline also takes some buy-in from a team used to ad hoc CSS. Compared with the two paths most teams take, keeping two libraries or standardising on one framework, the trade is discipline for consistency. Two libraries mean two backlogs and a drift you can't see until a designer notices. Standardising on one framework means a migration nobody has budgeted for. Arena offers a third route where the contract is the thing you maintain and both packages follow, which suits a team that expects to live with React and Angular side by side for a while. The price is that every visual decision has to become a token, which is exactly the constraint that keeps the two outputs identical.

Access is open source under the MIT license, with the packages on npm and the code in the dravensoft-dev/arena repository on GitHub. There's no paid tier and no signup, and the documentation, benches and kitchen sinks are all on the arena.dravensoft.org site. No contact email is published, so issues and questions go through GitHub.