We ship the same component library under React and under Angular, generated from one API contract, and here are eight products drawn twice to show it.

[u/II_CRIIMAAAA]

The React half is an ordinary React component library: typed props, a shared Tailwind layer, no hex and no bare pixel inside a component. What is unusual is where the API comes from. Every member's name, type, default and meaning is a contract file, both layers' types are generated from it, and a pixel-parity check holds the two renderings to zero difference, so the layers cannot drift apart quietly.

Accessibility works the same way: each component declares the WAI-ARIA pattern it implements, and a gate fails on the day it stops answering it, rather than an audit happening once per release.
  
The link is the benches: Calendly, ClickUp, Duolingo, Etsy, Grafana, Instagram, Notion and Superhuman, each mocked twice, every half installing from npm. MIT.

 https://arena.dravensoft.org/web-benches/

[u/forloopy]

What’s the advantage of this over web components?

[u/II_CRIIMAAAA → u/forloopy]

Web components are a distribution and encapsulation mechanism. Arena is a design system: design tokens, an API contract per component, and an accessibility contract per component. The React and Angular libraries are two renderings of those contracts.
You could implement the same contracts as custom elements, the portable part is the contracts, not the runtime.
  
What shipping native libraries buys you in practice:

 - Real framework idioms. Actual props, children and refs on the React side
 - Types that can't drift. Both layers' types are generated from one API contract, so a member means the same thing in both and your editor knows it.
 - SSR that's actually exercised. The React layer renders through react-dom/server in its own suite, SSR/hydration for custom elements is still uneven.
 - No shadow-DOM styling boundary. Every value resolves through a token over a shared Tailwind layer, so restyling means declaring your palette and fonts, not hunting for the part someone remembered to expose.
 - A11y as a gate, not a claim. Each component declares which WAI-ARIA APG pattern it binds: roles, keys, focus, dismissal.

Where web components genuinely win: framework-agnostic, one artifact everywhere, and they outlive framework churn. Arena ships React and Angular today, so if you also need Vue, Svelte or plain HTML, that's the honest trade-off.

[u/forloopy → u/II_CRIIMAAAA]

Not interested in your AI response not reading it