KQ-608 · LIMIT/METER

Limit Meter

The fill is made of the actual sends rather than anonymous ticks: each transfer is its own block, its width its share of the limit, growing from zero on glide and shrinking away on the exit ease when it is cancelled. Ahead of the fill the staged amount previews as a hatched segment that arrives on snap and marches one seamless stripe period while it stands, stopping when the tab is hidden. Crossing the limit turns the preview and the rail danger and prints the overage in money, and the remaining figure rolls to its new value on glide.

KQ-608 · LIMIT/METER

Waylight Pay daily limitleft

Resets 00:00Staging 250.00

Waylight Pay staging 250.00

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/limit-meter

Props

entries: LimitEntry[]; default —; Sends already counted against today, oldest first; each is one block of the fill.
limit: number; default —; The daily ceiling; the full width of the rail.
pending: number; default 0; The amount about to be sent, drawn as the hatched preview.
format: (value: number) => string; default Intl.NumberFormat, two decimals; Formats every amount the meter prints.
label: string; default Daily send limit; Names the meter for assistive technology.
resetNote: string; default Resets 00:00; Small note under the rail — the window's own words.

Prop	Type	Default	Description
entries	LimitEntry[]	—	Sends already counted against today, oldest first; each is one block of the fill.
limit	number	—	The daily ceiling; the full width of the rail.
pending	number	0	The amount about to be sent, drawn as the hatched preview.
format	(value: number) => string	Intl.NumberFormat, two decimals	Formats every amount the meter prints.
label	string	Daily send limit	Names the meter for assistive technology.
resetNote	string	Resets 00:00	Small note under the rail — the window's own words.