Introduction

ElementsKit is a library of reactive primitives. Pick one, use it in plain JavaScript, React, a custom element, or on the server. Everything builds on one small core; JSX, custom elements and the UI Kit are modules you add only if you want them.

Every piece is its own import, so you ship only what you use.

• Compose, don't configure. Small focused APIs: signal, computed, on, fromEvent, async. Combine primitives instead of maintaining an overloaded interface.
• Close to the platform. promise extends Promise. Custom elements are HTMLElement. JSX compiles to document.createElement. No virtual DOM, no proxies.
• Predictable and explicit, no magic. Signals are reactive; nothing else is. No hidden subscriptions.
• Designed for the AI age. Code is cheap; maintenance still isn't. Swap one block at a time.

InstallCopy Anchor Link

pnpm add elements-kit

Full setup (TypeScript JSX config, CDN, Deno) in Installation.

import { signal, computed, effect } from "elements-kit/signals";
import { online } from "elements-kit/utilities/network";
import { createMediaQuery } from "elements-kit/utilities/media-query";
import { on } from "elements-kit/utilities/event-listener";

const clicks = signal(0);
const dark = createMediaQuery("(prefers-color-scheme: dark)");
const label = computed(() => `${clicks()} clicks · ${online() ? "online" : "offline"}`);

const button = document.querySelector("button")!;
on(button, "click", () => clicks(clicks() + 1));

effect(() => {
  button.textContent = label();
  document.body.classList.toggle("dark", dark());
});

Same signals in every tab. See the full progression (signals → element → component → custom element) in the Quick start.

Start hereCopy Anchor Link

ExploreCopy Anchor Link

ElementsKit is built and maintained by the Quba team.