Kinetiq

KQ-638 · COST/BASIS

Cost Basis

What you paid, against what it is worth. A neutral base fill runs to the paid mark and a coloured extension fills from there toward worth — right in success, left in danger — both as transforms settling on glide, and the per-share toggle rolls both figures on snap while the lane deliberately holds still, because dividing both numbers by the same share count changes no ratio. The toggle is a real switch reached by Tab and flipped with Space.

KQ-638 · COST/BASIS
Coldbrook Bank · lot detail
PaidPaid $12,410WorthWorth $14,824
BSN · 340 shares · $36.50 → $43.60
Paid $12,410, worth $14,824, up $2,414, 19.5 percent

Worth $14,824 · paid $12,410 · +19.5% · per share off

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/cost-basis

Props

symbol
string
default —
Instrument code printed under the lane.
shares
number
default —
Units held; divides both totals for the per-share view.
costPerShare
number
default —
Average price paid — the lane's mark.
price
number
default —
Current mark. A new value re-fills the lane on glide and rolls the worth figure.
perShare / defaultPerShare
boolean
default false
Controlled or initial state of the per-share toggle.
onPerShareChange
(perShare: boolean) => void
default —
Fires from the click or key that flipped the toggle.
format
(value: number) => string
default USD, 0dp
Formats the position totals.
formatPrice
(value: number) => string
default USD, 2dp
Formats the per-share figures.
headroom
number
default 0.12
Slack past the larger figure so a full lane never touches the edge.
label
React.ReactNode
default —
Visible heading; omit it and pass aria-label.