Skip to content
Meterry Docs | Meter every Run, Value every Result

Introduction

Meter Components is a monorepo of meter UI components organized around the Headless UI approach:

Package Description
@meterry/component Framework-agnostic core: Subject API client, table controller, chart model, shared types
@meterry/component-react React components
@meterry/component-vue Vue 3 components
@meterry/component-tailwindcss Tailwind CSS plugin and default component styles

This project does not use Web Components, Shadow DOM, or customElements. Component behavior is managed by React/Vue, styles are injected through Tailwind classes, and every component slot can be overridden by the consumer.

Design principles

Section titled “Design principles”
  • Headless core: data fetching (SubjectClient), table state (createTableController), and chart models (createChartModel) all live in the core package, decoupled from any UI framework. The React/Vue components are just a thin layer on top of core.
  • Styles are fully takeable: by default components emit semantic classes (meter-card, meter-table, meter-chart, …). You can override them slot by slot with Tailwind via classNames, or enable unstyled and render everything yourself.
  • Browser-safe by design: the browser only holds a short-lived Subject Token issued by your backend; the tenant API key never reaches the frontend. The client ships with token caching, expiry refresh, single-flight, and 401 retries.

Automatic query and rendering

Section titled “Automatic query and rendering”

Use MeterUsageTable for query-owned tables and lazy event cursors, and MeterUsageChart for query-owned trend/category charts. They build on the same headless core and leave MeterTable / MeterChart unchanged. The guides include interactive previews with isolated mock data.

Integration examples

Section titled “Integration examples”

The MeterUsage, MeterChart, and MeterTable pages contain code examples. The component guides also include real React component previews driven by a browser-only mock Subject API; the Shared Filters preview demonstrates cross-component filtering. No source-site theme or Vue runtime is required. See Getting Started for complete React and Vue integrations with a shared SubjectClient.

Next steps

Section titled “Next steps”