Skip to content
NewService Map: 30 components for hosts, ports and routes
<hf-gauge>Custom elementFeedbackFree

Gauge

Semicircular gauge of green, amber and red cells with a sprung pointer; the zone word rolls when the value crosses a threshold.

View as Markdown
<hf-gauge>

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-gauge>
Props
valuelive
minremounts
maxremounts
zonesremounts
decimalsremounts
labelremounts
unitremounts
<HfGauge
  value={72}
  min={0}
  max={100}
  zones="60,85"
  decimals={0}
  label="Rate limit"
  unit="%"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-gauge
First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-gauge.json

Usage

import { HfGauge } from "@/components/lumesec/hf-gauge";

export function Example() {
  return (
    <HfGauge value={72} label="Rate limit" zones="60,85" />
  );
}

Behaviour

A semicircle of green, amber and red cells with a sprung pointer and a shimmer in the filled part. Past the last zone it pulses. The status word rolls when the zone changes.

API reference

Attributes

valueReact propvalueTypenumberDefault42

Current value, clamped to min–max. Observed.

minReact propminTypenumberDefault0

Lower bound. Not observed; read when value changes.

maxReact propmaxTypenumberDefault100

Upper bound. Not observed; read when value changes.

zonesReact propzonesTypestringDefault60,85

Two thresholds in value units, comma-separated: Elevated from the first, Critical from the second.

decimalsReact propdecimalsTypenumberDefault0

Decimal places in the displayed number.

labelReact proplabelTypestringDefaultRate limit

Text under the gauge and the start of the aria-label.

unitReact propunitTypestringDefault%

Text after the number. An empty value hides it.

Properties

valueTypenumber

Clamped value. Setting it writes the attribute.

min (read-only)Typenumber

Parsed min.

max (read-only)Typenumber

Parsed max.

frac (read-only)Typenumber

Position of the value in the range, 0 to 1.

zones (read-only)Type[number, number]

The two thresholds as fractions of the range, 0 to 1.

Accessibility

  • The canvas has role="meter" with aria-valuemin, aria-valuemax, aria-valuenow and an aria-label such as Rate limit: 72%, Elevated.
  • The number and zone word are plain text; there is no live region.
  • Reduced motion: the pointer jumps without the spring, the shimmer and the critical pulse are off, and the number and zone word swap without rolling.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --lumesec, --lumesec-success and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-muted and --ui-ok.

Notes

  • The visible label and unit text is set once on connect; the aria-label re-reads both on each value change.

Related

<hf-progress>
Progresshf-progressOpen Progress
<hf-context>
Context windowhf-contextOpen Context window
<hf-rings>
Goal ringshf-ringsOpen Goal rings
<hf-status>
Uptimehf-statusOpen Uptime

Was this page helpful?