A live board of currency pairs. When a rate ticks, its cell washes once and the digits roll in the direction of the move.
import { FxRateBoard } from "@/components/eased/fx-rate-board/fx-rate-board";import { createTickStream, useTicker } from "@/components/eased/_primitives/realtime-core/realtime-core";const stream = useMemo(() => createTickStream({ seed: "fx", series: fxSeries, intervalMs: 1500 }), []);const fx = useTicker(stream, { target: ref, history: 40 });<FxRateBoard rows={pairs.map((p) => ({ ...p, rate: fx.current.values[p.id], history: fx.series(p.id) }))} locale="en-US" />Installation
npx shadcn add @eased-pro/fx-rate-boardNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Props
| Prop | Type | Default | |
|---|---|---|---|
rows | FxBoardRow[] | { id, base, quote, rate, open, decimals, history? }. open is what the change is measured against. | |
locale | string | runtime | Numbers and currency names (Intl.DisplayNames). |
changeLabel | string | "24h" | Header of the change column. |
trendLabel | string | "Trend" | Header of the trend column (hidden under 24rem). |
Rows sit on one grid, so pairs, rates and changes each keep one edge. Pair the board with a pause control (useTicker().toggle): anything that autoplays needs one.
Motion signature: a tick washes its cell green or red once for 0.9s while the digits roll the way the rate moved; trend lines morph from the shape on screen; nothing flashes on mount. Reduced motion: digits change at once and the colour wash stays.