@arclux/arc-ui-preact

Preact component wrappers for ARC UI web components with typed props and events.

Auto-generated — this package is produced by Prism from the canonical source in @arclux/arc-ui. Do not edit by hand.

Installation

npm install @arclux/arc-ui-preact @arclux/arc-ui lit

Requires preact >= 10.19.0.

Usage

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

export function App() {
  return (
    <>
      <Button variant="primary" onClick={() => console.log('clicked')}>
        Get Started
      </Button>
      <Card>
        <h3>Card Title</h3>
        <p>Card content.</p>
      </Card>
      <Input label="Email" type="email" placeholder="[email protected]" />
    </>
  );
}

Components are organized by tier and can be imported from subpaths:

import { Button } from '@arclux/arc-ui-preact/input';
import { Card }   from '@arclux/arc-ui-preact/content';
import { AppShell } from '@arclux/arc-ui-preact/layout';

Events

Each component's arc-* CustomEvents are exposed as typed onArc* props (arc-input → onArcInput, arc-select → onArcSelect, …). The handler receives the original CustomEvent; payloads are on event.detail:

<Input label="Email" onArcInput={(e) => console.log(e.detail.value)} />

Server-side rendering

The wrappers register custom elements on import, which requires a DOM. With SSR frameworks, render them client-side only.

Theming

Components read design tokens from CSS custom properties. Overriding the base accent tokens re-themes every component — see the theming guide:

:root {
  --accent-primary: rgb(77, 126, 247);
  --accent-primary-rgb: 77, 126, 247;
}

Links

• Documentation & interactive examples
• Canonical source (@arclux/arc-ui)
• Repository
• License (MIT)