Threshold Meter
A free stats component for supplied readings and explicit acceptable bands.
Print studio / proof 04
Ink coverage check
Example input
Supplied ink coverage
46%
Scale: 0% to 100%
Acceptable: 35% to 55%
within band
Customise
Code
<StatThresholdMeter label="Supplied ink coverage" min={0} max={100} low={35} high={55} unit="%" value={46} />Threshold Meter is a free stats component for Next.js and React, styled with Tailwind. It shows a caller-supplied number against a fixed acceptable band, with an indicator that moves to changed readings in 240 milliseconds when motion is available.
The exact reading, scale, acceptable thresholds and status are present in the server HTML. A native meter supplies the accessible value and name, while the decorative gauge stays within its track even when the actual reading falls outside the scale.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/stat-threshold-meterUsage
import { StatThresholdMeter } from "@/components/stat-threshold-meter";
export function ProofReading() {
return (
<StatThresholdMeter
label="Supplied ink coverage"
value={46}
min={0}
max={100}
low={35}
high={55}
unit="%"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | Actual finite reading. Visible text preserves String(value), including readings outside the scale. |
| min | number | required | Finite lower scale endpoint. |
| max | number | required | Finite upper scale endpoint, strictly greater than min. |
| low | number | required | Inclusive lower boundary of the acceptable band. |
| high | number | required | Inclusive upper boundary of the acceptable band, strictly greater than low. |
| label | string | required | Nonempty visible name for the reading and native meter. |
| optimum | number | midpoint of low and high | Native meter optimum, within the acceptable band. |
| unit | string | "" | Literal suffix appended to the reading and endpoint text. Include a leading space when needed, as in unit=" lux". |
| className | string | undefined | Additional classes merged onto the component root. |
Customisation
Supply your own value, domain, thresholds, label and unit. Five scoped CSS variables control the muted track, band, marker, marker ring and transition duration. All colour defaults resolve from semantic theme tokens, and className can set spacing or type context.
<StatThresholdMeter
label="Supplied illuminance"
value={420}
min={0}
max={800}
low={300}
high={600}
unit=" lux"
className="max-w-lg"
/>
/* On this component's containing panel */
.proof-panel {
--threshold-meter-track: var(--muted);
--threshold-meter-band: var(--muted-foreground);
--threshold-meter-ink: var(--foreground);
--threshold-meter-ring: var(--background);
--threshold-meter-duration: 240ms;
}Frequently asked questions
- Is Threshold Meter free for commercial use?
- Yes. Threshold Meter is MIT licensed and free to use in personal and commercial projects under the repository's Commons Clause terms.
- What happens without JavaScript or with reduced motion?
- The server HTML already contains the exact reading, band limits, scale limits and native meter. Without JavaScript, in print, or with reduced motion, the marker stays at its current target without a transition.
- Can I use different quantities and theme colours?
- Yes. Pass your own finite value, scale, acceptable band and unit. Set the threshold meter CSS variables on a containing panel to retheme the track, band, marker and ring for that context.