ns-ui
Capacity-vs-legal-limit meter drawn as a ship's side-profile hull with Plimsoll load-line marks: the waterline rises with load, the hull itself settles a few px deeper on a separate spring, and the S mark flips to amber the moment load passes the legal limit.
Use when load measured against a legal or contractual limit rather than a soft budget, where crossing the line is a discrete event with consequences and the hull itself settles deeper as it fills; pick meter-quota-meniscus instead when the limit is soft and being over it is tolerated, or meter-threshold-trip when the pair that matters is a trip point and a lower re-arm mark.
Install
npx shadcn add https://design.helpmarq.comns-ui / gauge-capacity-waterline
Hold 3 — Bulk Cargo
22% / 84%
Hover or focus the hull for an exact sounding; the S mark goes amber once the load passes the legal limit.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current load, 0-150+ (%). Values above `limit` are overload. |
| limit? | number | — | Legal capacity limit (%) — where the "S" load line sits. Default 100. |
| className? | string | — | — |