Quickstart

Relements is HTML-first: you style native elements with .re-* classes and data-* attributes. The base functionality needs no JavaScript — behaviors are opt-in. The same class/attribute API works in React, Vue, Svelte, Angular, and plain HTML, with no wrappers.

1. Install

npm

npm install @relements/core

pnpm

pnpm add @relements/core

yarn

yarn add @relements/core

bun

bun add @relements/core

2. Import the stylesheet once

At your app entry:

import "@relements/core/index.css";

Or, with no bundler, link the built file:

<link rel="stylesheet" href="node_modules/@relements/core/dist/index.css" />

That single import gives you light and dark — the palette follows the OS via prefers-color-scheme automatically (see Dark mode).

3. Use a component — no JavaScript

Style native elements with the .re-* classes and data-* attributes:

<button class="re-button" data-variant="primary">Save</button>

<label class="re-field">
  <span class="re-field__label">Email</span>
  <input class="re-input" type="email" name="email" />
  <span class="re-field__hint">We'll only use this to contact you.</span>
</label>

That’s a styled, accessible, themeable button and field — keyboard, focus, and form semantics all come from the native elements. No components to import, no JavaScript to run.

4. (Optional) Add a behavior

A few patterns layer an opt-in enhance* behavior for richer interaction. They work declaratively via data-re-* attributes — e.g. a dialog:

<button class="re-button" data-re-dialog-trigger data-re-dialog-target="confirm">Delete…</button>
<dialog class="re-dialog" id="confirm">
  <form method="dialog" class="re-dialog__body">
    <p>Delete this item?</p>
    <button class="re-button" data-variant="danger">Delete</button>
    <button class="re-button" data-re-dialog-close>Cancel</button>
  </form>
</dialog>

import { enhanceDialog } from "@relements/core/behaviors/dialog";

// wires triggers, close buttons, backdrop dismiss, focus trap; returns { destroy() }
enhanceDialog(document);

In a framework, run the behavior when the element mounts and call its destroy() on unmount — each framework guide shows the idiomatic one-liner (a React hook, a Vue directive, a Svelte action, an Angular directive).

Next steps

Components Every component, with live demos and a keyboard/accessibility section.

Framework guides Drop Relements into React, Vue, Svelte, or Angular.

Editor setup Autocomplete for classes, attributes, and tokens, plus TypeScript types for the elements.

Theming & tokens Re-theme any subtree by redeclaring --re-* tokens; full token reference.

Accessibility The HTML-first a11y stance: focus, forced colors, honest ARIA.