KQ-679 · SUBSCRIPTION/LIST

Subscription List

A standing list of everything that charges the account, ordered by next charge, where the soonest row keeps a live countdown that ticks once a second from an interval and stops while the tab is hidden. Cancelling a row calls back from the press; when the host drops it the row slides left as its ResizeObserver-measured height closes on the exit ease, and the monthly total rolls its digit columns to the new figure on snap, counting a yearly plan as a twelfth of itself. Every cancel is a real button named for its service, so Tab reaches each one and Enter or Space fires it, while the countdown sits in an aria-live="off" timer that can be queried instead of announced every second.

KQ-679 · SUBSCRIPTION/LIST

Subscriptions

4 active

Fernworks Studio, $18.00 a month
1d 02:14:05
Basinworks Data, $64.00 a month, next charge in 5 days 3 hours
Coldbrook Transit, $9.50 a month, next charge in 12 days 0 hours
Gaugeworks Atlas, $240.00 a year, $20.00 a month, next charge in 21 days 0 hours

Monthly $111.50 · next in 1d 02:14:05

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/subscription-list

Props

items: SubscriptionItem[]; default —; The subscriptions: id, name, plan, amount, cycle and dueInSeconds. The soonest charge leads the list and gets the countdown.
onCancel: (id: string) => void; default —; Fires from the press on a row's cancel; remove the item to play the slide-out.
onTick: (secondsLeft: number) => void; default —; Fires once a second from the countdown interval with the seconds left on the soonest charge.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Turns an amount into its printed string. The default pins an explicit locale so server and client agree.
running: boolean; default true; Runs the countdown. False holds it where it stands, and it also stops while the document is hidden.
label: string; default "Subscriptions"; Names the list and the monthly total for assistive technology.
emptyLabel: string; default "Nothing charges this account."; The designed empty state; no height is reserved for it.

Prop	Type	Default	Description
items	SubscriptionItem[]	—	The subscriptions: id, name, plan, amount, cycle and dueInSeconds. The soonest charge leads the list and gets the countdown.
onCancel	(id: string) => void	—	Fires from the press on a row's cancel; remove the item to play the slide-out.
onTick	(secondsLeft: number) => void	—	Fires once a second from the countdown interval with the seconds left on the soonest charge.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Turns an amount into its printed string. The default pins an explicit locale so server and client agree.
running	boolean	true	Runs the countdown. False holds it where it stands, and it also stops while the document is hidden.
label	string	"Subscriptions"	Names the list and the monthly total for assistive technology.
emptyLabel	string	"Nothing charges this account."	The designed empty state; no height is reserved for it.