KQ-710 · ROUND/UP
Round Up
A purchase card whose spare change is saved. When a new purchase arrives with the switch on, the change chip lifts out of the card on snap and glides into the savings figure above, shrinking as it goes; on arrival the figure rolls its digits on snap and a tag names what landed. The switch is a real role="switch" that Space and Enter flip, the figure reads as one string, and each landing is announced.
KQ-710 · ROUND/UP
Round-ups$14.20
Coldbrook CoffeeCard · 08:12$4.35
$0.65 spare
Round-ups $14.20
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/round-up
Props
- purchase
- RoundUpPurchase | null
- default null
- { id, merchant, amount, note? }. A new id is a new purchase; when enabled its change lifts and flies.
- saved / defaultSaved
- number
- default 0
- Controlled or initial round-up total.
- onSavedChange
- (saved: number, change: number) => void
- default —
- Fires when a lifted change lands in the figure, with the new total and the amount that landed.
- enabled / defaultEnabled
- boolean
- default true
- Controlled or initial switch state.
- onEnabledChange
- (enabled: boolean) => void
- default —
- Fires from the press that flipped the switch.
- roundTo
- number
- default 1
- The unit a purchase rounds up to.
- 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 "Round-ups"
- Names the savings figure.
| Prop | Type | Default | Description |
|---|---|---|---|
| purchase | RoundUpPurchase | null | null | { id, merchant, amount, note? }. A new id is a new purchase; when enabled its change lifts and flies. |
| saved / defaultSaved | number | 0 | Controlled or initial round-up total. |
| onSavedChange | (saved: number, change: number) => void | — | Fires when a lifted change lands in the figure, with the new total and the amount that landed. |
| enabled / defaultEnabled | boolean | true | Controlled or initial switch state. |
| onEnabledChange | (enabled: boolean) => void | — | Fires from the press that flipped the switch. |
| roundTo | number | 1 | The unit a purchase rounds up to. |
| 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 | "Round-ups" | Names the savings figure. |