Frameworks

Overview

The core @arclux/arc-ui package contains Lit-based custom elements that work in any environment. Our code generator, Prism, parses the Lit source and produces a framework-native wrapper package for each framework:

• Proper event binding (e.g. React's synthetic events)
• TypeScript type definitions
• Idiomatic imports for each framework
• SSR compatibility where supported

React

Published as @arclux/arc-ui-react — install it alongside the base stylesheet:

React wrappers use @lit/react createComponent under the hood, which handles event binding and ref forwarding automatically.

Vue

Published as @arclux/arc-ui-vue — install it alongside the base stylesheet:

Svelte

Published as @arclux/arc-ui-svelte — install it alongside the base stylesheet:

Angular

Published as @arclux/arc-ui-angular — install it alongside the base stylesheet:

Add the stylesheet to your global styles, then import the standalone components:

Solid

Published as @arclux/arc-ui-solid — install it alongside the base stylesheet:

Preact

Published as @arclux/arc-ui-preact — install it alongside the base stylesheet:

Without a wrapper

The wrappers are a convenience, not a requirement. Every component is a standard custom element, so <arc-button> works inside a framework template the moment the element is registered. This path has shipped since v3 and was documented nowhere; it is the right one if you would rather not add a dependency, or if you are already writing custom elements elsewhere in the app.

Register what you use — a side-effect import per component, or the whole catalog at once:

Telling your framework the tag is real

Most frameworks need one line so the compiler stops treating an unknown tag as a typo or a component of its own. Svelte and Solid need nothing.

Typed tags in JSX

React, Preact and Solid each get a generated declaration file that types every ARC tag — the same props, the same enum unions as the wrapper packages. Add it to your program as a file. A types entry looks like the natural way to do it and silently does nothing: TypeScript resolves types as a package name and never follows an export subpath, so the name matches nothing, nothing is included, and every tag stays untyped without a diagnostic.

Swap in preact-jsx.d.ts or solid-jsx.d.ts as needed, or reference the file from one module instead: /// <reference path="./node_modules/@arclux/arc-ui/types/solid-jsx.d.ts" />

What you give up

Custom events are the whole difference, and it is not the same in every framework. Solid binds them natively — on:arc-change={handler} — and the declaration file types it. React 19 forwards unknown props to the element, so an event needs a ref and a listener. Preact is the strictest case: it lowercases the name after on, so a dashed event like arc-change cannot be reached from a plain prop at all, and a ref with addEventListener is the only route. That listener wiring is what the wrapper packages are for — if you use custom events heavily in React or Preact, take the wrapper.

Vanilla JS / CDN

No framework needed — use the core Web Component package directly:

Or via CDN with no build step: