KQ-702 · LIMIT/RAISE

Limit Raise

A credit limit drawn as a bar against the most the issuer could grant — the current limit a solid cobalt segment with the balance used drawn darker inside it — and a stepper beneath that names the limit you would like, its tick sliding along the bar on snap. Requesting draws the ask as a hatched extension that grows from the limit's end on snap and marches while the request stands; approval fills it, the solid segment gliding out over the hatch as the figure rolls to the new limit and an Approved chip lands on recoil, while a decline turns the hatch danger and says so in words. The readout is a role="spinbutton": arrows step, Page keys move five, Home and End reach the ends.

KQ-702 · LIMIT/RAISE

Basin cardlimit

Raise to

4,500.00

Basin card 1,260.00 available of 4,000.00 | asking 4,500.00

Install

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

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

Props

limit: number; default —; The current limit; the solid segment. Raise it when a request is approved.
used: number; default —; Balance already used; drawn inside the limit.
ceiling: number; default limit × 2.5; The most that can be asked for; the full track.
step: number; default 500; Amount per stepper press or arrow key; Page keys move five.
proposed / defaultProposed: number; default limit + step; Controlled or initial ask; the uncontrolled ask resets to limit + step when the limit changes.
onProposedChange: (amount: number) => void; default —; Fires from the press or key that changed the ask.
status: "idle" | "requested" | "approved" | "declined"; default idle; Where the request stands; the parent decides.
onRequest: (amount: number) => void; default —; Fires from the Request button with the ask.
format: (value: number) => string; default Intl.NumberFormat, two decimals; Formats every amount the bar prints.
label: string; default Credit limit; Names the meter; printed above the bar.

Prop	Type	Default	Description
limit	number	—	The current limit; the solid segment. Raise it when a request is approved.
used	number	—	Balance already used; drawn inside the limit.
ceiling	number	limit × 2.5	The most that can be asked for; the full track.
step	number	500	Amount per stepper press or arrow key; Page keys move five.
proposed / defaultProposed	number	limit + step	Controlled or initial ask; the uncontrolled ask resets to limit + step when the limit changes.
onProposedChange	(amount: number) => void	—	Fires from the press or key that changed the ask.
status	"idle" \| "requested" \| "approved" \| "declined"	idle	Where the request stands; the parent decides.
onRequest	(amount: number) => void	—	Fires from the Request button with the ask.
format	(value: number) => string	Intl.NumberFormat, two decimals	Formats every amount the bar prints.
label	string	Credit limit	Names the meter; printed above the bar.