Relements

HTML-first

Native elements styled with .re-* classes and data-* attributes. Base functionality works with zero JavaScript — behaviors are opt-in.

Framework-agnostic

One class/attribute/event API for React, Vue, Svelte, Angular, and plain HTML. No wrappers, no per-framework packages.

Accessible by default

Keyboard, focus, and ARIA come from the platform. Automatic dark mode and Windows High Contrast support, tested with axe on every change.

Themeable

Re-theme globally or any subtree by redeclaring --re-* tokens. Cascade layers keep your own overrides winning automatically.

Install

npm

npm install @relements/core

pnpm

pnpm add @relements/core

yarn

yarn add @relements/core

bun

bun add @relements/core

Import the stylesheet once at your app entry — that single import gives you light and dark, following the OS automatically:

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

A 30-second example

No components to import and no JavaScript to run — style native elements with the .re-* classes:

Primary Secondary Ghost Danger

Live example

<div class="row">
  <button type="button" class="re-button">Primary</button>
  <button type="button" class="re-button" data-variant="secondary">Secondary</button>
  <button type="button" class="re-button" data-variant="ghost">Ghost</button>
  <button type="button" class="re-button" data-variant="danger">Danger</button>
</div>

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

The Quickstart walks through adding a field and an optional behavior; the framework guides show the one-line setup for React, Vue, Svelte, and Angular.

Explore

Quickstart Install to first component in under a minute.

Components 44 components with live demos and per-component keyboard/accessibility notes.

Framework guides React, Vue, Svelte, Angular — the idiomatic enhance pattern for each.

Theming & tokens Cascade-layer theming and the full --re-* token reference.

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

HTML-first policy Why native semantics come first, and what progressive enhancement means here.