# FX Rate Board

> An animated FX rate board for React and shadcn, showing live currency pairs with trend lines.

A live board of currency pairs: when a rate ticks, its cell washes once and the digits roll in the direction of the move. Trend lines morph from the shape on screen, nothing flashes on mount, and the clock rests off screen.

- Tier: Eased Pro
- Interaction: Loading
- Page: https://eased.dev/components/fx-rate-board
- Installs: motion

## Install

FX Rate Board ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/fx-rate-board
```

A live board of currency pairs. When a rate ticks, its cell washes once and the digits roll in the direction of the move.

```tsx
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" />
```

## 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.