Uncertainty Whisker
A free stats component for a supplied estimate and its bounded interval.
Studio estimate / 04
Print production quote
Issued 19 Oct 2026
Print delivery estimate
8 days
Estimate 8 days; supplied interval 6 days to 9 days; scale 0 days to 12 days.
The capped span is the supplier’s stated delivery interval. The diamond marks the estimate for this print job.
Archive measurement / B-17
Folio width
Measured width at the binding edge, including the supplied tolerance.
Object width
130 mm
Estimate 130 mm; supplied interval 126 mm to 133 mm; scale 120 mm to 140 mm.
Customise
Code
<StatUncertaintyWhisker label="Print delivery estimate" min={0} max={12} lower={6} estimate={8} upper={9} unit=" days" />Uncertainty Whisker is a free stats component for Next.js and React, styled with Tailwind. It plots a caller-supplied estimate inside a capped interval on one scale and keeps every number readable as exact text.
Use it for quantities such as a print supplier's delivery range or an archive object's measured width. The end caps express uncertainty around the estimate; they do not mark acceptable thresholds or progress. Its server-rendered figure and caption remain complete without JavaScript, in print and with reduced motion.
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-uncertainty-whiskerUsage
import { StatUncertaintyWhisker } from "@/components/stat-uncertainty-whisker";
export function PrintQuote() {
return (
<StatUncertaintyWhisker
label="Estimated press and finishing time"
min={0}
max={12}
lower={6}
estimate={8}
upper={9}
unit=" days"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Specific measured quantity shown in the visible figure caption. |
| min | number | required | Finite lower scale endpoint. |
| max | number | required | Finite upper scale endpoint. The span max minus min must be finite and positive. |
| lower | number | required | Finite lower supplied interval endpoint, within the scale. |
| estimate | number | required | Finite central estimate between lower and upper. |
| upper | number | required | Finite upper supplied interval endpoint, within the scale. |
| unit | string | "" | Literal suffix shown beside every number. Include a leading space for a word unit, as in unit=" days". |
| className | string | undefined | Additional classes merged onto the figure root. |
Customisation
Supply an ordered lower, estimate and upper tuple with a finite scale. Invalid inputs show a visible unavailable note and the raw supplied values instead of a plotted glyph. Scoped variables set the ink, axis, accent and travel duration. The complete caption stays visible under every theme.
<StatUncertaintyWhisker
label="Object width"
min={120}
max={140}
lower={126}
estimate={130}
upper={133}
unit=" mm"
className="max-w-sm"
/>
/* On the containing document panel */
.archive-panel {
--uncertainty-ink: var(--foreground);
--uncertainty-track: var(--border);
--uncertainty-accent: var(--primary);
--uncertainty-duration: var(--dur-3, 600ms);
}Frequently asked questions
- Is Uncertainty Whisker free for commercial use?
- Yes. Uncertainty Whisker is MIT licensed and free to use in personal and commercial projects under the repository's Commons Clause terms.
- Does the interval still make sense without animation?
- Yes. The server renders the estimate, interval, scale and a capped whisker at their final positions. Reduced motion, print, forced colours and no JavaScript keep the exact text and current positions visible.
- Does it calculate a confidence interval?
- No. Supply your own lower and upper values and estimate. The component validates their order and scale, then displays them without inferring statistics or rounding the numbers.