Ticker card

A stock or crypto quote: price, change in green or red with an arrow, a price line you can scrub, ranges, market status, and an amber note when the data is stale. Props only: the card never fetches.

Markdown

On this page

Price, change against the previous close, a line you can scrub, ranges and market status.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/ticker-card.json

Usage

tsx

import { TickerCard } from "@/components/ui/chatcn/ticker-card"

<TickerCard
  symbol="FLDN"
  name="Fieldnote Systems Inc."
  price={quote.price}
  previousClose={quote.previousClose}
  series={{ "1D": quote.intraday, "5D": quote.week }}
  market={{ state: "closed", label: "Closed at 16:00 EDT" }}
  stale={quote.delayed ? "Delayed 15 min" : undefined}
/>

Every widget takes plain props from a tool result, so map the tool output straight onto it. While the call runs, pass loading for a skeleton that matches the final layout; when it fails, pass error (and onRetry). Install with ticker-card and nothing else from the kit is required at runtime.

For one day the change is measured against previousClose, drawn as a dotted line; for longer ranges it is measured from the first point. Pass each range's series up front, or load it in onRangeChange and pass it in; a range without data says so instead of drawing nothing.

Examples

Crypto and compact rows

A 24/7 market with its own ranges, and three compact rows for a watchlist.

States

Loading, a rate limit error, a falling price with delayed data, and no history for a range.

Props

Prop	Type	Notes
`symbol`, `name`, `exchange`	`string`
`price`, `previousClose`	`number`	Without a price the card shows its skeleton
`currency`, `locale`, `decimals`		Prices under 1 get 4 decimals by default
`series`	`Record<string, (number \| { t, v })[]>`	Oldest first. `t` is the scrubber label
`ranges`	`string[]`	Default 1D, 5D, 1M, 1Y. Crypto often uses 24H
`range`, `defaultRange`, `onRangeChange`	`string`	Controlled or uncontrolled
`market`	`{ state: "open" \| "closed" \| "pre" \| "post", label? }`	Open is green
`stale`	`boolean \| string`	Amber note: Delayed 15 min
`updated`	`string`	Shown when the data is fresh
`layout`	`"full" \| "compact"`	`compact` is one watchlist row
`loading`, `error`, `onRetry`		States
`labels`	`Partial<TickerCardLabels>`	Every string the card shows or announces, range names included, for translation

Keyboard

Key	Action
`Tab`	The chart, then the range buttons
`ArrowLeft`, `ArrowRight`	Scrub through the points; the header shows that price
`Home`, `End`	First or last point
`Escape`	Back to the live price

Accessibility

Change is read in words (up $3.72, 2.00%) and carries an arrow, so green and red are never the only signal.
The chart is a slider whose value reads the point's time and price, and whose name gives the range's low and high.
The chart always runs left to right, even in RTL, because time does.

Motion

None on data. Prices swap without count-up, and scrubbing follows the pointer 1:1.
Range buttons change color in 150 ms.