Framework Guides

ARC UI is built on Lit Web Components. We built a custom code generator called Prism that reads the Lit source and produces typed, idiomatic bindings for every major framework.

Overview

ARC UI follows a write-once, run-everywhere architecture. The core @arclux/arc-ui package contains Lit-based custom elements that work in any environment. We built a custom code generator called Prism that parses any Lit web component and produces framework-native wrappers, giving you:

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

Every framework package re-exports the same components — choose the one that matches your stack.

React

@arclux/arc-ui-react

Install the React wrapper package:

npm install @arclux/arc-ui-react

Import and use components:

import { Button, Card, Input } from '@arclux/arc-ui-react';

function App() {
  return (
    <Card>
      <span slot="heading">Sign In</span>
      <Input label="Email" placeholder="you@example.com" />
      <Button variant="primary" onClick={() => console.log('clicked')}>
        Submit
      </Button>
    </Card>
  );
}

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

Vue

@arclux/arc-ui-vue

Install the Vue wrapper package:

npm install @arclux/arc-ui-vue

Use in your Vue components:

<script setup>
import { ArcButton, ArcCard } from '@arclux/arc-ui-vue';
</script>

<template>
  <ArcCard>
    <template #heading>Hello Vue</template>
    <ArcButton variant="primary" @click="handleClick">
      Click Me
    </ArcButton>
  </ArcCard>
</template>

Svelte

@arclux/arc-ui-svelte

Install the Svelte wrapper package:

npm install @arclux/arc-ui-svelte

Use in your Svelte components:

<script>
  import { ArcButton, ArcCard } from '@arclux/arc-ui-svelte';
</script>

<ArcCard>
  <span slot="heading">Hello Svelte</span>
  <ArcButton variant="primary" on:click={() => console.log('clicked')}>
    Click Me
  </ArcButton>
</ArcCard>

Angular

@arclux/arc-ui-angular

Install the Angular wrapper package:

npm install @arclux/arc-ui-angular

Add the module to your app and use components:

// app.module.ts
import { ArcUiModule } from '@arclux/arc-ui-angular';

@NgModule({
  imports: [ArcUiModule],
})
export class AppModule {}

// In your template:
// <arc-button variant="primary" (click)="handleClick()">
//   Click Me
// </arc-button>

Solid

@arclux/arc-ui-solid

Install the Solid wrapper package:

npm install @arclux/arc-ui-solid

Use in your Solid components:

import { ArcButton, ArcCard } from '@arclux/arc-ui-solid';

function App() {
  return (
    <ArcCard>
      <span slot="heading">Hello Solid</span>
      <ArcButton variant="primary" onClick={() => console.log('clicked')}>
        Click Me
      </ArcButton>
    </ArcCard>
  );
}

Preact

@arclux/arc-ui-preact

Install the Preact wrapper package:

npm install @arclux/arc-ui-preact

Use in your Preact components:

import { ArcButton, ArcCard } from '@arclux/arc-ui-preact';

function App() {
  return (
    <ArcCard>
      <span slot="heading">Hello Preact</span>
      <ArcButton variant="primary" onClick={() => console.log('clicked')}>
        Click Me
      </ArcButton>
    </ArcCard>
  );
}

Vanilla JS / CDN

No framework? No problem. Use the core web component package directly:

npm install @arclux/arc-ui lit

import '@arclux/arc-ui/button';
import '@arclux/arc-ui/card';

Or load via CDN with no build step:

<script type="module"
  src="https://unpkg.com/@arclux/arc-ui/register">
</script>

<arc-button variant="primary">Click Me</arc-button>
<arc-card>
  <span slot="heading">Hello World</span>
  <p>Pure HTML, no framework needed.</p>
</arc-card>

For projects that can't use JavaScript, ARC UI also provides standalone CSS files.

Import the bundle or individual component styles:

<!-- Full bundle -->
<link rel="stylesheet" href="https://unpkg.com/@arclux/arc-ui-html/css/arc-ui.css">

<!-- Individual component -->
<link rel="stylesheet" href="https://unpkg.com/@arclux/arc-ui-html/css/button.css">

<button class="arc-button arc-button--primary">Click Me</button>