KQ-675 · SPEND/ALERT

Spend Alert

Crossing the warning threshold slides an alert pill in from a shift above its rail on glide — no overshoot, because a warning that celebrates is a warning nobody believes — and a halo behind its icon breathes between two keyframes on drift, reversing forever. Crossing the limit is a different state rather than a louder one: the copy and the colour turn danger and the breath stops, since a breach is a fact and not an ambient condition. Dismissing slides the pill away on the exit ease and leaves a smaller dot arriving on snap; Escape from inside the pill dismisses it and hands focus to that dot, which is a real button that brings the pill back.

KQ-675 · SPEND/ALERT

Groceries$342 / $450

Basin Market$64
Coldbrook Diner$27

Groceries $342 of $450 · clear

Install

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

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

Props

category: string; default —; The category the alert is about; named in the copy and in both labels.
spent: number; default —; Money spent in the category so far.
limit: number; default —; The category's cap.
warnAt: number; default 0.85; Share of the limit at which the pill arrives.
open / defaultOpen: boolean; default —; Controlled visibility, which overrides both the threshold and the dismissal; defaultOpen false starts dismissed.
onOpenChange: (open: boolean) => void; default —; Fires from the click or key that dismissed or restored it.
format: (value: number) => string; default —; Formats both amounts; defaults to an explicit en-US currency formatter.
showDot: boolean; default true; Leaves a dot behind on dismissal; false removes the alert outright.

Prop	Type	Default	Description
category	string	—	The category the alert is about; named in the copy and in both labels.
spent	number	—	Money spent in the category so far.
limit	number	—	The category's cap.
warnAt	number	0.85	Share of the limit at which the pill arrives.
open / defaultOpen	boolean	—	Controlled visibility, which overrides both the threshold and the dismissal; defaultOpen false starts dismissed.
onOpenChange	(open: boolean) => void	—	Fires from the click or key that dismissed or restored it.
format	(value: number) => string	—	Formats both amounts; defaults to an explicit en-US currency formatter.
showDot	boolean	true	Leaves a dot behind on dismissal; false removes the alert outright.