React Quantity
A measured value has a right way to be shown, and most software gets it wrong. Quantity renders significant figures, engineering notation with SI prefixes (3.20 µA, not 0.0000032 A), scientific notation with real superscripts, and ± uncertainty — all in monospaced tabular digits so columns align. It's the read-only partner to the Unit Input, and the exported formatQuantity() drops the same formatting into tables, tooltips, and the Spec Sheet.
Core voltage0.9012±0.0025VBias current3.200µAClock1.1997GHzJunction87.3°C
Same value, four notations — 0.0000032 A
auto3.200µAengineering3.200µAscientific3.200×10⁻⁶Afixed0.0000032A
sm42.17mWmd42.17mWlg42.17±0.35mW
formatQuantity() is exported for tables: e.g. 3.30 nF from 3.3e-9 F.
Installation
npx shadcn@latest add "http://localhost:3000/registry/quantity.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | The measured value |
| uncertainty | number | — | Absolute ± uncertainty |
| unit | string | — | Base unit (SI prefix is applied to it) |
| notation | 'auto' \ | 'fixed' \ | 'engineering' \ |
| sigFigs | number | 4 | Significant figures |
| label | string | — | Uppercase micro-label above the value |
| size | 'sm' \ | 'md' \ | 'lg' |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.