KQ-622 · PRICE/TICKER
Price Ticker
A price whose digit columns roll one face on snap in the direction the print moved — up from below when it rose, down from above when it fell — while columns that did not change hold still. A wash flashes success or danger behind the figure and leaves on the exit ease, and the change chip rolls its sign and percent on the same pair while its arrow turns over on snap. The component never generates a print: it rolls what it is given, reports each committed one through onPrint, and writes a polite sr-only sentence only after the flash window is quiet, so a burst of prints announces once.
Last $24.06 · 0 prints · last flat
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/price-ticker
Props
- price
- number
- default —
- The last price. Changing it rolls the digits the way the print moved and flashes the wash.
- previousClose
- number
- default —
- The basis the change chip is measured against.
- symbol
- string
- default "BSN/USD"
- The instrument printed above the figure; names the readout for assistive technology.
- venue
- string
- default —
- A quiet line beside the symbol — the book the print came from.
- format
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
- Turns a price into its printed string. The default pins an explicit locale so server and client agree.
- flashMs
- number
- default 700
- How long the direction wash holds before it fades, and the quiet the live region waits out before it announces.
- size
- "md" | "lg"
- default "lg"
- Figure scale; md fits the price into a dense row.
- onPrint
- (price: number, direction: "up" | "down" | "flat") => void
- default —
- Fires once per committed print, from the effect that observed it.
| Prop | Type | Default | Description |
|---|---|---|---|
| price | number | — | The last price. Changing it rolls the digits the way the print moved and flashes the wash. |
| previousClose | number | — | The basis the change chip is measured against. |
| symbol | string | "BSN/USD" | The instrument printed above the figure; names the readout for assistive technology. |
| venue | string | — | A quiet line beside the symbol — the book the print came from. |
| format | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }) | Turns a price into its printed string. The default pins an explicit locale so server and client agree. |
| flashMs | number | 700 | How long the direction wash holds before it fades, and the quiet the live region waits out before it announces. |
| size | "md" | "lg" | "lg" | Figure scale; md fits the price into a dense row. |
| onPrint | (price: number, direction: "up" | "down" | "flat") => void | — | Fires once per committed print, from the effect that observed it. |