KQ-722 · PRICE/ALERT

Price Alert

A threshold line dragged over a price chart. The line sits directly under the hand once a press has travelled four pixels, a plain click or a key moves it on snap, and the alert badge follows it through a spring on glide so the label trails the tool by a beat. When the last price lands on the other side of the line the badge pulses — landing from 1.25× on recoil with a ring that expands on the enter ease — and onCross fires; moving the line re-arms it without a pulse. The badge is a vertical slider: Up and Down step, Page keys jump ten, Home and End reach the bounds.

KQ-722 · PRICE/ALERT

BSN/USD alert

$24.40

Waiting for a rise past $24.40

Alert $24.40 · BSN $24.09 · waiting above · 0 crossings

Install

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

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

Props

points: number[]; default —; Prices oldest first; the last one is the live print the crossing is judged against.
value / defaultValue: number; default the middle of the range; Controlled or initial threshold.
onValueChange: (value: number) => void; default —; Fires from the drag, click or key that moved the line.
min / max: number; default the data's range, padded 8%; The chart's vertical range and the threshold's bounds.
step: number; default 0.01; Threshold granularity; arrow keys move one step, Page keys ten.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Prints the threshold and prices. The default pins an explicit locale so server and client agree.
height: number; default 160; Plot height in px; the width is fluid and measured with a ResizeObserver.
label: string; default "Price alert"; Names the slider and prints in the header.
onCross: (direction: "above" | "below", price: number) => void; default —; Fires from the effect that observed the last price crossing the line, with the side it landed on.

Prop	Type	Default	Description
points	number[]	—	Prices oldest first; the last one is the live print the crossing is judged against.
value / defaultValue	number	the middle of the range	Controlled or initial threshold.
onValueChange	(value: number) => void	—	Fires from the drag, click or key that moved the line.
min / max	number	the data's range, padded 8%	The chart's vertical range and the threshold's bounds.
step	number	0.01	Threshold granularity; arrow keys move one step, Page keys ten.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Prints the threshold and prices. The default pins an explicit locale so server and client agree.
height	number	160	Plot height in px; the width is fluid and measured with a ResizeObserver.
label	string	"Price alert"	Names the slider and prints in the header.
onCross	(direction: "above" \| "below", price: number) => void	—	Fires from the effect that observed the last price crossing the line, with the side it landed on.