KQ-614 · SPEND/LIMIT

Spend Limit

A card's monthly limit as a rail you drag over a column of the spend so far. The column fills on glide with no overshoot, the rail tracks the pointer once the drag clears 4px and settles onto the nearest step on snap, and the remaining-room chip rides the rail with its figure rolling on the same spring. Dragging the ceiling under the spend hatches the slice above it in danger on a colour tween — nothing bounces. It is a vertical role="slider": arrows step, Page keys move five, Home and End run to the ends.

KQ-614 · SPEND/LIMIT

Coldbrook card ceilingUSD

Spent 860340 left

Limit 1,200 · 340 left

Install

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

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

Props

value / defaultValue: number; default 1200; Controlled or initial limit.
onValueChange: (value: number) => void; default —; Fires from the pointer move or key that changed the ceiling.
onCommit: (value: number) => void; default —; Fires once the ceiling has settled — on release, or on key-up.
spend: number; default 860; Spend so far, drawn as the column fill.
max: number; default 2000; Top of the scale.
step: number; default 50; Release snap and arrow step; Page keys move five of them.
format: (value: number) => string; default Intl.NumberFormat("en-US"); Formats every amount in the instrument.
label: string; default "Monthly limit"; Names the slider.
unit: string; default "USD"; Suffix beside the headline figure.
disabled: boolean; default false; Locks the rail.

Prop	Type	Default	Description
value / defaultValue	number	1200	Controlled or initial limit.
onValueChange	(value: number) => void	—	Fires from the pointer move or key that changed the ceiling.
onCommit	(value: number) => void	—	Fires once the ceiling has settled — on release, or on key-up.
spend	number	860	Spend so far, drawn as the column fill.
max	number	2000	Top of the scale.
step	number	50	Release snap and arrow step; Page keys move five of them.
format	(value: number) => string	Intl.NumberFormat("en-US")	Formats every amount in the instrument.
label	string	"Monthly limit"	Names the slider.
unit	string	"USD"	Suffix beside the headline figure.
disabled	boolean	false	Locks the rail.