Web Components

Install

Framework-agnostic custom elements. Drop them into plain HTML, Angular, Rails or Laravel views, a static site, or anywhere else that renders markup.

npm install @elaanio/elements

Define and configure

import { defineElaanElements, configureElaan } from "@elaanio/elements";

defineElaanElements();
configureElaan({ apiBase: "https://api.elaan.io/v1", tokenProvider });

Call both once, as early as you can. defineElaanElements() registers the custom elements; configureElaan() gives them the API base and the token provider they all share.

Use the elements

<elaan-bell></elaan-bell>
<elaan-feed></elaan-feed>
<elaan-preferences></elaan-preferences>

They are ordinary custom elements, so they can appear anywhere in your markup, including inside a framework that knows nothing about Elaan. Because they upgrade when defined, putting them in the initial HTML is fine even if the script loads later.

Styling

The elements read the same --elaan-* custom properties as the React and Vue builds, set on :root. See Theming for the full token list, or use the core stores if you want to render your own markup entirely.