@arclux/arc-ui-svelte
v4.2.0
Published
Svelte 5 wrappers for ARC UI Web Components.
Maintainers
arclight-devReadme
@arclux/arc-ui-svelte
Svelte 5 component wrappers for ARC UI web components, using runes ($props) and snippets.
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-svelte @arclux/arc-ui litRequires svelte >= 5.0.0.
Usage
<script>
import { Button, Card, Input } from '@arclux/arc-ui-svelte';
</script>
<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:
<script>
import { Button } from '@arclux/arc-ui-svelte/input';
import { Card } from '@arclux/arc-ui-svelte/content';
import { AppShell } from '@arclux/arc-ui-svelte/layout';
</script>Events
Props that aren't declared component props are forwarded to the underlying <arc-*> element, including event attributes. Listen to arc-* CustomEvents with onarc-* attributes:
<Input label="Email" onarc-input={(e) => console.log(e.detail.value)} />Server-side rendering
The wrappers register custom elements on import, which requires a DOM. In SvelteKit, use them from client-rendered code (e.g. behind a browser guard or with ssr = false for the page).
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;
}