@corvaui/web-components

Framework-agnostic CorvaUI custom elements built with Stencil.

npm install @corvaui/web-components @corvaui/tokens

Prefer direct component registration when an application needs a predictable asset path:

import "@corvaui/tokens/css";
import { defineCustomElement as defineCorvaButton } from "@corvaui/web-components/components/corva-button.js";

defineCorvaButton();

<corva-button variant="primary">Save</corva-button>

Complex chart inputs should be assigned as properties after registration:

const chart = document.querySelector("corva-chart");
chart.type = "histogram";
chart.label = "Latency distribution";
chart.xKey = "observationId";
chart.bins = 12;
chart.data = latencyRows;
chart.series = [{ key: "latency", label: "Latency" }];
chart.annotations = [{ label: "SLO", tone: "warning", value: 48 }];
chart.controls = ["crosshair", "zoom", "range", "data-table", "download", "fullscreen"];

corva-chart supports bar, line, area, scatter, bubble, pie, donut, sparkline, histogram, box plot, radar, and gauge visualizations with responsive SVG marks, keyboard and pointer tooltips, token-themed crosshairs and annotations, reduced-motion behavior, and semantic summaries. Opt-in controls add range navigation, zoom, pan, reset, data-table visibility, fullscreen, and CSV/SVG/PNG export. Listen for corvaPointSelect and corvaRangeChange to receive original source-row indexes and visible-range updates.

The lazy loader is available from @corvaui/web-components/loader. See CorvaUI documentation for loader asset paths, events, slots, complex properties, and framework integration. Supported runtimes and browsers are defined in the included support policy.