Meters & limits
How much is used and how much is left: limits, allowances, dials, capacity, stock, envelopes, streaks and goals.
Installation & usage
npx @youj/cli add app-limit-metersAlso installs alert, async-button, badge, button, card, dropdown-menu, empty, icon-more-horizontal, refill-meter, select, skeleton, sparkline, typography, use-announcer, youj-core, youj-ui-core.
The CLI copies the block to blocks/app/limit-meters.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import { LimitMeters, type LimitMetersProps } from '@/blocks/app/limit-meters'
export function LimitMetersView({ limiters, kinds }: Pick<LimitMetersProps, 'limiters' | 'kinds'>) {
return (
<LimitMeters
limiters={limiters}
kinds={kinds}
copy={{ title: 'Rate limits' }}
onRaiseLimit={async (limiter) => {
// await your API here; the block shows progress until it settles
}}
onRetry={() => {
// your code
}}
/>
)
}Description
How much of an allowance is used, live: pick what is limited (your own kinds, such as API keys and endpoints, phone lines or library cards) and watch its bucket drain as it is spent and refill at the limit's pace. Send a burst to see it refuse, or raise the limit.
What has been used of a limit, on a ruler from zero, with a rule's line and the pace beside it, a tile per category and the rules as switches. Change the limit or ask for more. The demo is a team card; stories show a yearly time-off allowance and a cloud storage plan.
One thing's health across its parts: a zoned gauge beside its signals and a row per part with two figures and a state. A part whose state offers the action (a lagging region) can be shifted off; the footer adds capacity. The windows, signals, states and every word are yours: a service and its regions, a patient and their monitors, a wind farm and its turbines.
How full each region is, tier by tier, as a block of isometric columns, each filling its dashed case. Pick a region for its tiers and when it fills, and Add capacity provisions a step more. Storage by default; warehouse floors and parking levels are in the stories, and the tiers and the unit are yours.
A rack of bins as an isometric drawing (the demo: a line-side flow rack, with a pharmacy shelf and a vending machine in the stories): each bin a cell holding a block as tall as its stock, in its part's color, with low bins in the warning color and empty ones as dashed outlines. Point at a bin for a tag with how many are left and when it runs out, and flip the auto-call switch to have a low bin call the refill. format reads the counts and times, and loading, error and empty states take the drawing's place.
A budget as envelopes: safe to spend today in large mono, then a rack of cells per envelope that drain as the budget is spent. Drag between envelopes, or log the next entry. The demo is a household's month; stories show a team's sprint in hours and a cloud account's credits per project.
A run of days on anything, as an instrument: the picked item's streak as a flame meter, 26 weeks of heat dots where today's dot is the toggle, and a daily list with a Mark done pill. A freeze can save a run broken yesterday. The demo is four daily habits; stories show a support team's response target and a student's study days.
The period's targets, each with its progress, a notch for where an even pace would be by today and a status from the recent rate. The picked goal is drawn as a burn-up: the total so far, the even pace, and a forecast inside its likely range, with the day it reaches the target.
Code
Limit Meters, the Limit meters story: the files youj add writes.
blocks/app
Reference
Props15 props
Props
| Prop | Type | |
|---|---|---|
theme | ThemeInputWraps the block in this theme. Default: the theme around it. | – |
embedded | booleanInside another app: a default true | true |
fill | booleanTake the whole width it's given instead of stopping at its natural width (544px at 100% scale). default false | false |
copy | Partial<LimitMetersCopy>Any of the card's strings, to rewrite or translate. | – |
limiters | LimitMetersLimiter[]What there is to choose from, with its figures now; re-render with fresh ones to keep it live. Default: demo limiters, driven by simulated traffic. | – |
kinds | LimitMetersKind[]The groups the limiters are listed under in the picker, in order; a limiter's default API keys and Endpoints | API keys and Endpoints |
format | { rate?: (value: number) => string }Writes the rate figures (the throughput, the limit and the policy line) as text. Default: the locale's number format. Units come from | – |
defaultLimiter | stringThe limiter shown first. Default: the first. | – |
onRaiseLimit | (limiter: LimitMetersLimiter) => Promise<unknown> | unknownRaises a limiter's limit; resolve when it's applied. Default: a short demo wait. | – |
loading | booleanSkeletons in place of the figures while your data loads. default false | false |
error | ReactNodeShown in place of the figures when they fail to load, with Retry when | – |
onRetry | () => voidRetries after an | – |
empty | ReactNodeReplaces the message when | – |
demoMarker | booleanShows a dashed "Demo data" badge while the card runs on simulated traffic (no default true | true |
locale | stringFormats its numbers and dates (BCP 47). Default: | – |
Strings31 keys for copy
Strings
copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.
titlescopemoreviewLogscopyIdrefilllimiterthroughputperMinutestatustokensthrottledCodethrottledWindowthrottledChartlimitcapacityacceptedperMinuteUnittokensUnitpolicysendBurstraiseraisingraisedrefilleddemoDataloadingretryemptyTitleemptyDescriptionlocaleBuilt from11 components
Built from
Accessibilitymeters, toggles, keyboard, motion
Accessibility
Limit meters has a labelled picker, and the bucket is a meter named by its label.
Health dial labels its window control and the signals section, and each row's action button names its part ("Shift traffic from us-east-2"). Loading is announced, and an error says why with a Retry button. The stories show other worlds, with their own names and words.
Tiered capacity draws its columns as a picture (aria-hidden); the region picker is a labelled segmented control with spoken buttons, the legend is a list, and a hidden table holds every figure.
Bin rack draws the rack as a decorative image and lists every bin as a button with its state and when it runs out (for example "Caps C-12, 6 left, low, empty in ~14 min"); focusing a bin tags it on the drawing. Low and empty are named in words as well as colored and dashed, and the auto-call switch is labelled. The stories show other worlds, with their own names and words.
Envelopes are a labelled group; each envelope is named with what is left (or by how much it is over). Money moves by drag or by keyboard: Space picks an envelope up, the arrow keys choose the target and the amount, Enter moves it and Escape cancels, with a hidden hint describing the keys. The Pace budget treemap has one tab stop, with the arrow keys and Home and End moving between cells. The plan is a list of switches, each beside the step it applies.
In Streaks each item in the list is a button with aria-pressed and a name, and the Mark done control is a labelled toggle for today. The list has its own label.
Each chart has a name and a one-sentence summary, and the metric chart's numbers are also in a real table behind View data. Wherever you can scrub a chart (the KPI tiles and the metric chart), it is a slider: Left and Right step a bucket, Home and End jump to either end, Escape lets go, and each position is read out as a sentence with the date, the figures and the change. The tile and chart headers update with it.
Under reduced motion values change in place.