# ElementsKit

> Universal reactive primitives for the web — signals, JSX, custom elements, and browser-API helpers.

Every page concatenated: [llms-full.txt](https://elements-kit.com/llms-full.txt)

## Core

- [Introduction](https://elements-kit.com/index.md): Reactive primitives for any runtime: signals, data, routing, DOM and browser state. JSX, custom elements and the UI Kit are optional modules.
- [Installation](https://elements-kit.com/getting-started/installation.md): Install ElementsKit and configure JSX in your TypeScript project.
- [Quick start](https://elements-kit.com/getting-started/quick-start.md): From signals to custom elements — build the same counter five different ways.
- [Philosophy](https://elements-kit.com/getting-started/philosophy.md): How ElementsKit thinks — composable, explicit, framework-optional primitives.
- [Signals](https://elements-kit.com/signals.md): Fine-grained reactivity with signal, computed, effect, and more.
- [Store](https://elements-kit.com/stores.md): Framework-agnostic reactive state with @reactive class fields.
- [Scopes](https://elements-kit.com/scopes.md): Where effects live, when they dispose, and how to attach reactive code to custom elements.

## Primitives

- [Primitives](https://elements-kit.com/primitives.md): Reactive building blocks for data, forms, routing, context, DOM events, observers, browser state and timing. One import each, any framework.
- [Promise](https://elements-kit.com/primitives/promise.md): Wrap a Promise as a ComputedPromise — awaitable and reactive.
- [Async](https://elements-kit.com/primitives/async.md): Reactive, awaitable async controllers — start, stop, rerun, and read state as signals.
- [Retry](https://elements-kit.com/primitives/retry.md): Retry any async function with backoff. Composes with promise and async.
- [Storage](https://elements-kit.com/primitives/storage.md): localStorage and sessionStorage as writable signals, synced across tabs.
- [Form object](https://elements-kit.com/primitives/form-object.md): Read and write an HTMLFormElement as a nested plain object via field names.
- [Routing](https://elements-kit.com/primitives/routing.md): Reactive location, search params and URL patterns, plus navigate: a router built from signals.
- [Context](https://elements-kit.com/primitives/context.md): Pass values down a tree without props: setContext and getContext, for JSX, custom elements and plain scopes.
- [DOM events](https://elements-kit.com/primitives/events.md): Event listeners and interaction signals: on, hover, focus-within, click-outside, long-press, active element.
- [Observers](https://elements-kit.com/primitives/observers.md): Reactive element size, scroll, resize, intersection and mutation observers.
- [Browser state](https://elements-kit.com/primitives/browser-state.md): Reactive window, viewport, network and device state: media queries, window size, orientation, online status, media devices.
- [Media](https://elements-kit.com/primitives/media.md): Reactive audio and video player state: playing, muted, volume, time.
- [Timing](https://elements-kit.com/primitives/timing.md): Reactive timeouts, intervals, debounced and throttled signals, and previous values.
- [Building primitives](https://elements-kit.com/primitives/building-primitives.md): Turn any event-driven API into a signal with fromEvent and sync.

## Rendering

- [Elements](https://elements-kit.com/elements.md): JSX compiles to real DOM elements. Reactive props are effects under the hood.
- [Components](https://elements-kit.com/components.md): Class components — reactive state and element rendering in one place.
- [For](https://elements-kit.com/elements/for.md): Keyed list rendering — each item renders once per key, no re-renders on reorder.
- [Types](https://elements-kit.com/elements/types.md): Derive JSX prop types from components without hand-written declaration blocks.
- [Custom Elements](https://elements-kit.com/custom-elements.md): Native HTMLElement authoring, enhanced gradually with signals, JSX, and decorators.
- [Attributes](https://elements-kit.com/custom-elements/attributes.md): Attributes vs properties — and how @attributes wires them to reactive state.
- [Styling](https://elements-kit.com/custom-elements/styling.md): Style custom elements efficiently with Constructable Stylesheets and raw CSS imports.
- [Slots](https://elements-kit.com/custom-elements/slots.md): Pass content into components — native slots with Shadow DOM, and ElementsKit Slots without it.
- [Server Rendering](https://elements-kit.com/server-rendering.md): Stream HTML from any JavaScript runtime and hydrate it on the client — no compiler, no VDOM.

## UI Kit

- [UI](https://elements-kit.com/ui.md): ElementsKit UI components — accessible, reactive, framework-agnostic.
- [Styles](https://elements-kit.com/ui/styles.md): Optional theme layer — design tokens, color scales, light/dark, sizing.
- [Accordion](https://elements-kit.com/ui/accordion.md): Headless disclosure built on native <details>. Single-open grouping, animated open/close, zero JavaScript.
- [Alert](https://elements-kit.com/ui/alert.md): Inline informational box — three variants, three sizes, color theming.
- [Arrow](https://elements-kit.com/ui/arrow.md): Animated CTA chevron — pure CSS, one class, inherits color and font-size.
- [Avatar](https://elements-kit.com/ui/avatar.md): User image with a text fallback — two variants, nine sizes, color theming.
- [Badge](https://elements-kit.com/ui/badge.md): Inline status pill — four variants, three sizes, color theming.
- [Button](https://elements-kit.com/ui/button.md): Headless button styled by the optional theme layer — six variants, four sizes.
- [Card](https://elements-kit.com/ui/card.md): Block-level container with surface, border, and optional elevation.
- [Checkbox](https://elements-kit.com/ui/checkbox.md): Headless checkbox styled by the optional theme layer — two variants, three sizes.
- [Code](https://elements-kit.com/ui/code.md): Inline code span — four variants, nine sizes, color theming.
- [Group](https://elements-kit.com/ui/group.md): CSS-only wrapper that attaches adjacent controls — buttons, inputs, selects, toggles — into one joined unit.
- [Item](https://elements-kit.com/ui/item.md): A row with an avatar, a title and description, and trailing values or actions.
- [Kbd](https://elements-kit.com/ui/kbd.md): Keyboard key chip — nine sizes.
- [Label](https://elements-kit.com/ui/label.md): A label for a control, a checkbox or a group of menu items.
- [Link](https://elements-kit.com/ui/link.md): Accent-colored anchor with configurable underline behavior and focus ring.
- [Menu](https://elements-kit.com/ui/menu.md): A menu's content (items, trailing parts, labels and separators).
- [OTP Input](https://elements-kit.com/ui/otp-input.md): Segmented one-time-passcode input — a single hidden field behind rendered cells, form-associated, with SMS autofill.
- [Overlay](https://elements-kit.com/ui/overlay.md): One frame for every floating surface — windows, sheets, drawers, panels, and anchored popovers — geometry as a reactive box model projected into CSS channels.
- [Progress](https://elements-kit.com/ui/progress.md): Native <progress> styled as a determinate or indeterminate bar — two variants, three sizes.
- [Radio](https://elements-kit.com/ui/radio.md): Headless radio button styled by the optional theme layer — two variants, three sizes.
- [Segmented Control](https://elements-kit.com/ui/segmented-control.md): CSS-only segmented control over native radios — two-tier indicator with crossfade fallback and CSS Anchor Positioning slide upgrade.
- [Select](https://elements-kit.com/ui/select.md): Headless select — a styled native <select>. We own the trigger chrome; the browser owns the option popup. No JavaScript.
- [Separator](https://elements-kit.com/ui/separator.md): A hairline between content, on a native <hr>, horizontal or vertical, in four lengths.
- [Slider](https://elements-kit.com/ui/slider.md): Headless range input — two variants, three sizes.
- [Switch](https://elements-kit.com/ui/switch.md): Headless toggle switch — two variants, three sizes.
- [Text Input](https://elements-kit.com/ui/text-input.md): Headless text input and textarea — one class, three modes, two variants, three sizes.
- [Toggle](https://elements-kit.com/ui/toggle.md): Headless toggle button — a <label> styled like a button, wrapping a native checkbox or radio. Binary on/off or exclusive single-select groups, all driven by :has(input:checked). No JavaScript.
- [Toolbar](https://elements-kit.com/ui/toolbar.md): CSS-only top and bottom bars with a large title that collapses as you scroll — regions by child order, grouped rows, surface, clean and soft variants.
- [dom-lifecycle](https://elements-kit.com/components/dom-lifecycle.md): Drop-in custom element for connect / disconnect / move / adopted notifications on a surrounding subtree.
- [Hero](https://elements-kit.com/ui/hero.md): Top-of-page block — flex column with optional center alignment.
- [Section](https://elements-kit.com/ui/section.md): Page section, container, header, headings, and paragraph — the building blocks of a marketing page.
- [River](https://elements-kit.com/ui/river.md): Two-column text + visual layout — alternate alignments for rhythm.
- [Pillar](https://elements-kit.com/ui/pillar.md): Vertical mini-card for a feature, benefit, or stat.
- [Testimonial](https://elements-kit.com/ui/testimonial.md): Quote card with oversized opening glyph, citation, and role line.
- [CTA Banner](https://elements-kit.com/ui/cta-banner.md): Bordered call-to-action panel — heading, copy, and CTA row.
- [Statistic](https://elements-kit.com/ui/statistic.md): Display-number block with leading label and trailing description.

## Integrations

- [Integrations](https://elements-kit.com/integrations.md): Use ElementsKit alongside React, Astro, Angular, Lit, Marko, Qwik, Solid, Svelte, and Vue.
- [Vite](https://elements-kit.com/integrations/vite.md): Hot module replacement for elements-kit components in any Vite app.
- [SVG](https://elements-kit.com/integrations/svg.md): Import an SVG file as an elements-kit component, server rendering included.
- [React](https://elements-kit.com/integrations/react.md): Use signals in React components with useSignal and useScope.
- [Astro](https://elements-kit.com/integrations/astro.md): Render elements-kit components as Astro islands — server-rendered, hydrated on the client — or use custom elements directly.
- [Angular](https://elements-kit.com/integrations/angular.md): Use elements-kit custom elements in Angular templates with typed element references.
- [Lit](https://elements-kit.com/integrations/lit.md): Use elements-kit custom elements alongside Lit with typed queries via HTMLElementTagNameMap.
- [Marko](https://elements-kit.com/integrations/marko.md): Use elements-kit custom elements in Marko templates with typed queries.
- [Qwik](https://elements-kit.com/integrations/qwik.md): Use elements-kit custom elements in Qwik with typed JSX via IntrinsicElements.
- [Solid](https://elements-kit.com/integrations/solid.md): Use elements-kit custom elements in Solid with typed JSX.
- [Svelte](https://elements-kit.com/integrations/svelte.md): Use elements-kit custom elements in Svelte with typed props via SvelteHTMLElements.
- [Vue](https://elements-kit.com/integrations/vue.md): Use elements-kit custom elements in Vue templates with typed props via GlobalComponents.

## Examples

- [Data fetching](https://elements-kit.com/examples/data-fetching.md): Compose async + retry + online + windowFocused into a resilient query that refetches on reconnect and tab focus.
- [Routing](https://elements-kit.com/examples/routing.md): Build a single-page router from patchHistory + matches/match + navigate, with same-origin link interception. No router library.
- [Debounced search](https://elements-kit.com/examples/search.md): Search-as-you-type with createDebounced + async + AbortController. The fetch tracks the debounced signal, so each keystroke restarts cleanly.
- [Infinite scroll](https://elements-kit.com/examples/infinite-scroll.md): Sentinel-driven pagination with createIntersectionObserver + async + a cursor signal. No scroll listeners, no rAF, no manual viewport math.
- [Context propagation](https://elements-kit.com/examples/context.md): Share a current-user signal with deeply-nested components via setContext + getContext, deferring the lookup with <dom-lifecycle> so it resolves after mount.
- [Toast queue](https://elements-kit.com/examples/toasts.md): Per-item effectScope owns each toast's auto-dismiss timer. Closing the toast disposes the scope, cancelling the timer cleanly.
- [Event delegation](https://elements-kit.com/examples/event-delegation.md): Replace N per-row listeners with one parent listener for large lists. Look up the row from a data source via the element's data-id.