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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-meterNew here? Read the installation guide.
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} />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorMeter } from "@/components/beste/component/inspector-meter";
<InspectorMeter
label="Contrast"
className="w-72"
value={5.3}
min={1}
max={21}
precision={2}
suffix=":1"
thresholds={[{"from":1,"status":"danger"},{"from":3,"status":"warning"},{"from":4.5,"status":"success"}]}
/>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`. |
A number and the unit that gives it meaning, in one row: px, rem, a percentage, or a keyword like auto that is the whole value on its own. Each unit may bring its own range, so a percentage stops at 100 while pixels do not.
The line of prose that belongs between rows: what a setting is for, why one is switched off, what a value will cost. Four tones, each with its own mark, and the same text size as the rows around it.
Settings row for a span rather than a value: two thumbs on the row itself, the band between them filling it, and both ends of the pair read out on the right. Ticks, tones and thumb states follow inspector-slider exactly, appearing on hover.
The choice that has to be seen to be made: a template, a layout, a chart type. Each option is a picture, normally a rendered screenshot passed as a URL, or markup for the choices no photograph would show. The row is the trigger, the grid is width-matched to it, and the captions under the pictures can be dropped for a set whose pictures say everything.