Asset Row

Beta

Get Ritla UI

One asset in a list: gold, a stock or a currency pair, with its price, change and an optional sparkline.

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 asset-row
Also works with shadcn: npx shadcn@latest add @ritla/asset-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

asset-row.tsx

import { AssetList, AssetLogo, AssetRow } from "@/components/ui/asset-row";<AssetList aria-label="Watchlist">  <AssetRow logo={<AssetLogo kind="gold" />} name="Gold" symbol="XAU" price="58.330" change={1.24} chart={[52, 54, 55, 58]} /></AssetList>

API reference

AssetRow

Prop	Type	Default	Description
`name / symbol`	`ReactNode / string`	None	The asset and its ticker; the ticker stays left to right.
`logo`	`ReactNode`	None	An AssetLogo, or any 40px mark.
`price`	`ReactNode`	None	The price, formatted by the app.
`change`	`number`	None	The change in percent: a Plain Trend badge, and the sparkline's colour.
`chart`	`number[]`	None	Figma's Sparkline: recent prices, oldest first.
`href`	`string`	None	Makes the whole row a link.

AssetLogo

Prop	Type	Default	Description
`kind`	`"gold" \| "stock" \| "fx"`	None	Gold is a coin on amber, Stock the initials, FX two flags.
`initials / flags`	`string / [string, string]`	None	Stock's letters; FX's two countries (ISO), base first.
`size`	`"sm" \| "md"`	`"md"`	32 in tiles, 40 in rows.

Accessibility

ARIA

Each row is a list item; with href the name is a link stretched over the row.
The logo and sparkline are decorative: the name, price and change carry the meaning.

Arabic and RTL notes

Mirrors

The logo moves to the right and the price to the left.

Does not mirror

The sparkline: time runs left to right in every language.

Numerals: Figures the app formats (prices, balances) arrive as text; the component keeps them left to right with <bdi dir="ltr">.
Arabic typography: label-14 Medium for the name, numeric-14 Medium for the price.