The row that reports rather than asks: a measurement the work produced, shown in the family's surface so it can sit among the settings that caused it. Threshold bands colour the bar and the number without the caller recomputing them, and it is a meter rather than a progress bar, which is how it is announced.
The import and the props worth knowing about, in one place.
import { InspectorMeter } from "@/components/beste/component/inspector-meter";
// Bands read lowest first; the last one the value has reached wins
<InspectorMeter
label="Contrast"
value={ratio}
min={1}
max={21}
precision={2}
suffix=":1"
thresholds={[
{ from: 1, status: "danger" },
{ from: 3, status: "warning" },
{ from: 4.5, status: "success" },
]}
/>
<InspectorMeter
label="Bundle"
value={bytes}
max={250_000}
format={(n) => `${Math.round(n / 1000)} kB`} // decides the whole reading
status="warning" // overrides the bands outright
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// A reading with no meaningful range is better off as a number alone
<InspectorMeter label="Products" value={1533} showBar={false} />Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value* | number | — | The reading. |
min | number | 0 to 100 | The range it sits in, which is what the bar is a fraction of. |
max | number | — | |
format | (value: number) => string | — | How the number reads. Given a function, it decides outright; otherwise the value is printed with `precision` decimals and `suffix` after it. |
suffix | string | — | Printed after the number, e.g. `%`, `kB`, `:1`. |
precision | number | 0 | Decimals the printed number keeps. |
status | "neutral" | "success" | "warning" | "danger" | — | What the reading means. Left out, `thresholds` decides; with neither, the row is neutral. |
thresholds | Threshold[] | — | Bands, lowest first. The last one whose `from` the value has reached wins, so a contrast ratio reads danger under 3, warning under 4.5 and success above it without the caller computing that on every render. |
showBar | boolean | true | Show the bar. A reading with no meaningful range — a file count, a word count — is better off as a number alone. |
disabled | boolean | — | Dim the row, for a reading that is not current. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to `label`. |