ns-ui

Meter Threshold Trip

A data-driven threshold indicator built like a thermostat's bimetallic strip: it bows progressively as a metric climbs, snaps across a visible contact gap at the trip point and latches, then only re-straightens once the value falls below a lower re-arm mark — making hysteresis visible instead of implying it with a color change.

Use when a dashboard alert with two thresholds — a trip point and a lower re-arm/clear mark — where the reason it hasn't cleared yet (it dipped, but not far enough) needs to be visibly different from simply being over the trip point again; the strip's pinned latch shows that gap directly. Pick switch-frost instead for an ordinary user-flipped binary toggle with no metric behind it, or password-strength-tide for a live score climbing from typed input with no fixed trip/clear pair — meter-threshold-trip has no user control at all, `value` is the only input, and its whole identity is the asymmetric snap-then-relax hysteresis loop.

Install

npx shadcn add https://design.helpmarq.com/r/meter-threshold-trip.json
  • meter
  • threshold
  • hysteresis
  • alert
  • svg
  • spring
  • status
  • accessibility

ns-ui / meter-threshold-trip

Queue latency alert

The strip bows as latency climbs and snaps against the contact the instant it trips — then stays latched, unmoved by a value that only dips partway back. It only re-arms once latency falls all the way below the lower clear mark.

P99 LATENCYCLEAR
45ms
clears 65mstrips 80ms

Clear at 45ms — trips at 80ms, clears at 65ms.

step the next latency sample

latched ≠ still over trip — it stays latched until the value clears the lower mark, not just drops below the trip point

Props

PropTypeDefaultDescription
valuenumber—the live metric being watched
tripAtnumber—the upper threshold — crossing it latches the strip against the contact
clearAtnumber—the lower re-arm mark — the strip only relaxes once value falls below this
min?number—domain floor for the visual scale (default 0)
max?number—domain ceiling for the visual scale (default 100)
unit?string—unit suffix for readouts, e.g. "%", "ms", "req/s" (default "%")
label?string—what's being watched, shown above the strip, e.g. "CPU temp"
className?string——
Back to the catalog