KQ-664 · STAKE/LOCK

Stake Lock

A staking card whose term rail is exact under the finger while a drag is live and settles onto its detent on snap when the pointer lifts, with the projected yield rolling its digits on snap beside it. Locking drops a padlock's shackle into its body on snap and starts an unlock countdown that stops while the tab is hidden and catches up when it returns; cancelling early arms first and opens the shackle on flick with no bounce. The rail is a real slider — arrows move a detent, Page keys move two, Home and End reach the shortest and longest term.

KQ-664 · STAKE/LOCK

Basinworks · stake4,200.00 BSN

Lock term90 days · 4.80%

30d90d180d365d

Projected yieldBSN

Term 90 d · 4.80% — Yield 49.71 BSN — Open

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/stake-lock

Props

amount: number; default —; The sum being staked.
symbol: string; default BSN; Ticker printed after every figure.
terms: StakeTerm[]; default 30 / 90 / 180 / 365 days at 3.2 / 4.8 / 6.4 / 8.1%; The detents: { days, apr }, ascending by days.
value / defaultValue: number; default the second term's days; Controlled or initial term, in days.
onValueChange: (days: number) => void; default —; Fires from the pointer or key that moved the term.
locked / defaultLocked: boolean; default false; Controlled or initial lock state.
onLockedChange: (locked: boolean) => void; default —; Fires from the press that locked, cancelled, or unstaked.
format: (value: number) => string; default Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); Formats the stake and the projected yield.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
amount	number	—	The sum being staked.
symbol	string	BSN	Ticker printed after every figure.
terms	StakeTerm[]	30 / 90 / 180 / 365 days at 3.2 / 4.8 / 6.4 / 8.1%	The detents: { days, apr }, ascending by days.
value / defaultValue	number	the second term's days	Controlled or initial term, in days.
onValueChange	(days: number) => void	—	Fires from the pointer or key that moved the term.
locked / defaultLocked	boolean	false	Controlled or initial lock state.
onLockedChange	(locked: boolean) => void	—	Fires from the press that locked, cancelled, or unstaked.
format	(value: number) => string	Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })	Formats the stake and the projected yield.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.