Overview of the Phoenix and LiveView Headless Meter Component

The Mishka Chelekom Headless Meter ships zero opinionated styling - only the semantic markup and full WAI-ARIA wiring for a scalar gauge that represents a known value within a defined range (for example disk usage or battery level), distinct from a progress bar which tracks task completion. The root carries role="meter" with aria-valuemin , aria-valuemax , aria-valuenow (clamped into the range) and aria-valuetext (a human-readable readout). Every part - label, value, track and indicator - is addressable through a *_class attribute, and the indicator exposes the fill ratio via the --chelekom-meter CSS custom property, so you style the gauge entirely with your own Tailwind classes.

Base UI Meter example (Phoenix headless)

<.meter
  id="baseui-meter-hero"
  value={24}
  label="Storage Used"
  show_value
  class="grid max-w-full w-60 grid-cols-2 gap-y-2"
  label_class="text-sm font-normal text-neutral-950 dark:text-white"
  value_class="text-right text-sm text-neutral-950 dark:text-white"
  track_class="col-span-2 h-3 overflow-hidden bg-neutral-200 dark:bg-neutral-800"
  indicator_class="bg-neutral-950 transition-[width] duration-500 dark:bg-white"
/>

Parts & data attributes

Each part carries a stable data-part and a structural chelekom-meter__* class you can target, plus the indicator's fill ratio is exposed as a CSS custom property.

Accessibility

Follows the WAI-ARIA Meter pattern : the root exposes role="meter" with the current value, range, and a human-readable aria-valuetext , so assistive technology announces a meaningful readout instead of a raw number. This component ships no JavaScript - it is a purely declarative, server-rendered gauge.