KQ-709 · GOAL/POT

Goal Pot

A savings pot whose liquid is the share of the goal already saved. Each increase mints a coin above the lip that drops in and lands on recoil, and only when it lands does the level rise on glide and the figure count up on the same spring; landing at the goal turns the lip success and glints it once. The pot is a meter with a spoken value text, the quick-add controls are real buttons reached by Tab and pressed by Enter or Space, and each add is announced.

KQ-709 · GOAL/POT

Camera body

of $1,200.00$560.00 to go

Saved $640.00 of $1,200.00 · $560.00 to go

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/goal-pot

Props

value / defaultValue: number; default 0; Controlled or initial amount in the pot.
onValueChange: (value: number, added: number) => void; default —; Fires from the quick-add press that changed the amount.
goal: number; default —; The target; the pot is full here and the lip glints when reached.
steps: number[]; default [20, 50, 100]; Quick-add amounts rendered as buttons under the readout. An empty list hides the row.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats every amount. The default pins an explicit locale so server and client agree.
label: string; default —; Names the pot; printed above the readout and read as the meter's label.

Prop	Type	Default	Description
value / defaultValue	number	0	Controlled or initial amount in the pot.
onValueChange	(value: number, added: number) => void	—	Fires from the quick-add press that changed the amount.
goal	number	—	The target; the pot is full here and the lip glints when reached.
steps	number[]	[20, 50, 100]	Quick-add amounts rendered as buttons under the readout. An empty list hides the row.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats every amount. The default pins an explicit locale so server and client agree.
label	string	—	Names the pot; printed above the readout and read as the meter's label.