FX Rate Row

Beta

Get Ritla UI

A currency pair with its rate, today's change and a small trend line; the whole row links to the rate detail.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add fx-rate-row
Also works with shadcn: npx shadcn@latest add @ritla/fx-rate-row
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

fx-rate-row.tsx

import { FxRateRow } from "@/components/ui/fx-rate-row";<FxRateRow  href="/rates/sar-usd"  base={{ code: "SAR", country: "SA" }}  quote={{ code: "USD", country: "US" }}  rate={0.2666}  change={0.12}  chart={recentRates}/>

API reference

FxRateRow

Prop	Type	Default	Description
`base / quote`	`{ code, country }`	None	The currency code and the country whose flag stands for it.
`rate`	`number`	None	How much of the quote one unit of the base buys; shown with four decimals.
`change`	`number`	None	Today's change in percent: the tag, and the trend line's colour.
`chart`	`number[]`	None	Recent rates, oldest first. Decorative: the change says the trend.
`pair`	`ReactNode`	`"SAR to USD"`	The pair line, in the page language.
`href`	`string`	None	Opens the rate detail.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Enter`	Opens the rate detail.

ARIA

The row is one link read by its text: the pair, the rate and the change. The flags and the trend line are decorative; pass aria-label for a longer name.

Arabic and RTL notes

Mirrors

The flags start the row on the right and the tag ends it on the left.
The chevron points left, toward next.

Does not mirror

The quote's flag stays over the base's in the same corner, so the pair reads in the same order in both languages.
The rate line “1 SAR = 0.2666 USD” and the trend line stay left to right.

Numerals: The change follows the numerals setting; the rate line keeps Western digits next to the Latin currency codes.
Arabic typography: body-16 Semibold pair and body-14 rate; the Arabic line is a little taller, so the row grows a few pixels.