ns-ui

Meter Quota Rule

A quota meter with no bar, no fill, no pill: the printed reading ('38.2 GB of 100 GB') sits above a 4px hairline whose used portion is solid and remainder is dashed, a fixed tick marks the warning threshold, and crossing it thickens the rule and bolds the digits instead of turning anything red.

Use when a single fraction-of-allowance reading (storage, seats, API credits, spend) meant to repeat dozens of times on one settings page at text scale, where the number itself is the primary reading and a bar/pill would be visual overkill; pick sparkline-automaton instead when the thing being shown is a SERIES trending against a rule over time rather than one static used/total fraction, or feeler-gap when the framing is a pass/fail value-vs-limit check rather than an ongoing allowance.

Install

npx shadcn add https://design.helpmarq.com/r/meter-quota-rule.json
  • meter
  • quota
  • usage
  • typography
  • svg
  • status
  • accessibility
  • settings

ns-ui / meter-quota-rule

Workspace usage

Every allowance on this page reads the same way: the number, then the rule underneath it. Used ground is solid, remaining ground is dashed, and a tick marks the warning line — crossing it thickens the rule and bolds the digits, never turns them red.

STORAGE

38.2 GB of 100 GB

38.2 of 100 gigabytes, below warning threshold

SEATS

14 seats of 20 seats

14 of 20 seats, below warning threshold

API CREDITS

4200 req of 5000 req

4200 of 5000 requests, at or above warning threshold

MONTHLY BUDGET

2150 $ of 5000 $

2150 of 5000 dollars, below warning threshold

advance the billing period

the printed numbers are the whole reading — the rule is a footnote to them, not the other way around

Props

PropTypeDefaultDescription
labelstring—what's being rationed, e.g. "Storage" — shown as a caption and used as the meter's accessible name
valuenumber—amount currently used
maxnumber—total allowance
unitstring—short unit printed after both numbers, e.g. "GB"
unitLabel?string—full unit word spoken by aria-valuetext, e.g. "gigabytes" — defaults to `unit`
warning?number—fraction of max (0-1) at which the rule crosses into warning weight
className?string——
Back to the catalog