ns-ui

Meter Quota Meniscus

A quota (storage, API budget, seats) rendered as liquid in a thin vessel where surface curvature, not level, carries the reading: concave under the soft limit, flat at it, convex and overfull-but-held in the grace zone, and a bead that breaks off past the hard limit leaving a permanent stain.

Use when a soft/hard-limit quota (storage, an API budget, seat count) where 'over the soft limit but still tolerated' needs its own visible shape rather than an amber bar segment — curvature reads the zone from a single still frame, and the hard-limit crossing leaves a permanent stain mark rather than just flipping a color. Pick password-strength-tide instead when the reading is a live strength/quality score entered by typing, where liquid LEVEL climbing a canvas tank is the whole mechanism and there is no fixed cap to spill past; pick feeler-gap instead for a single go/no-go threshold check (one value vs one limit, pass or jam) with no intermediate tolerated-overage zone.

Install

npx shadcn add https://design.helpmarq.com/r/meter-quota-meniscus.json
  • meter
  • quota
  • threshold
  • gauge
  • svg
  • spring
  • status
  • accessibility

ns-ui / meter-quota-meniscus

Quota vessels

The level rises normally under the soft limit — edge concave, climbing the walls. At the soft limit it flattens. Past it the level pins and the surface bulges convex above the rim instead: over budget, still held. Cross the hard limit and a bead breaks off, leaving a stain — the crossing itself becomes the record.

STORAGEunder soft limit
55%/ 100 cap

25% of headroom left

within soft limit
API BUDGETover soft limit
88%/ 100 cap

over the soft limit, still tolerated

over soft limit — still held
SEATSover hard limit
103%/ 100 cap

held — overflow marked on the glass

over hard limit — overflowing
simulate the next billing tick

Props

PropTypeDefaultDescription
valuenumber—current usage, same unit as softLimit/hardLimit
softLimitnumber—the soft threshold — the vessel's rim; reaching it flattens the surface
hardLimitnumber—the hard cap — crossing it detaches a bead and leaves a stain
unit?string—unit suffix for every readout, e.g. "%", "GB", "seats" (default "%")
label?string—what's being metered, shown above the vessel, e.g. "Storage"
className?string——
Back to the catalog