Meter Components

Meter Components is a headless meter component library: core + React + Vue 3 + Tailwind CSS. Data fetching, table state, and chart models are all headless, so your application’s UI stays under your control.

MeterList / MeterUsageList: column-defined tables with automatic query/cursor management and a built-in Load more button.
Get started with installation and complete React or Vue integration examples.
Introduction describes the packages and their design principles.
MeterUsageTable and MeterUsageChart own standard query, pagination/aggregation, and rendering without application loaders.
Advanced MeterUsage, MeterChart, and MeterTable cover the data components.
Shared Filters (MeterFilterBar) connects one filter state to Usage, Chart, and Table.

Truly headless

SubjectClient, the table controller, and chart models are all decoupled from the UI; component behavior is managed by React/Vue — no Web Components or Shadow DOM.

Tailwind-first styling

Components emit semantic meter-* classes by default. Override any slot through classNames, or turn on unstyled to render everything yourself. An official Tailwind CSS plugin is included. See Theming & Styles.

ECharts rendering, extensible types

MeterChart / MeterUsage are drawn by Apache ECharts. The ChartType union is open: register custom series and SVG renderers, and use isolated registries in micro-frontend setups. See Chart Extension & Registries.

Browser-safe auth

Subject Tokens are issued by your backend; the client ships with single-flight caching, expiry refresh, and 401 retries. The browser never holds a tenant API key. See SubjectClient & Auth.

Internationalization built in

All default copy lives in MeterMessages — partially override it through the messages prop to localize. See Internationalization.

Complete headless API

Use createTableController, createChartModel, and renderChartSvg directly, without the components, and build any UI you like.