Installation

Loquix ships as standards-based Web Components. Use it with any modern build tool and framework, or load the pre-built browser bundle for a quick prototype.

Package installation

npm

npm install @loquix/core@0.6.0 lit

pnpm

pnpm add @loquix/core@0.6.0 lit

yarn

yarn add @loquix/core@0.6.0 lit

lit is a peer dependency. Loquix uses it internally while exposing standard custom elements to your application.

Your first component

1. Load the design tokens.

   Import the shared variables once in your application entry point:

   import '@loquix/core/tokens/variables.css';

2. Register only what you use.

   A define/* import registers its custom element in the browser:

   import '@loquix/core/define/define-chat-composer';

3. Add the element to your markup.

   <loquix-chat-composer
     placeholder="Ask anything…"
     max-length="4000"
   ></loquix-chat-composer>

4. Listen for component events.

   Events bubble through Shadow DOM, so they can be handled on the element or a shared ancestor:

   document.addEventListener('loquix-submit', (event) => {
     console.log(event.detail.content);
   });

Your first component Live component

Choose an import strategy

Definition import

Use @loquix/core/define/define-* in most applications. It registers the custom element automatically and keeps imports explicit.

Class-only import

Use @loquix/core/classes/loquix-* when subclassing or controlling registration yourself.

Class-only import

import { LoquixChatComposer } from '@loquix/core/classes/loquix-chat-composer';

customElements.define('my-chat-composer', LoquixChatComposer);

CDN prototype

For a no-build prototype, load the tokens and bundled component definitions from unpkg:

<link
  rel="stylesheet"
  href="https://unpkg.com/@loquix/core@0.6.0/src/tokens/variables.css"
/>
<script src="https://unpkg.com/@loquix/core@0.6.0/cdn/loquix.min.js"></script>

Production recommendation

Prefer package imports in production. Your bundler can cache dependencies reliably, and explicit definition imports make the components used by your page easy to audit.

Framework notes

Custom elements use attributes for primitive values and DOM properties for objects and arrays. Event names stay the same across frameworks.

Plain HTML / JavaScript

Use attributes in markup and assign complex values as element properties.

React

Use the optional @loquix/react wrappers for typed props and idiomatic event callbacks.

Vue, Svelte, Angular

Use the native custom element support provided by the framework.

Next, build the complete quick-start chat or explore the component catalog.