Asset Tile

Beta

Get Ritla UI

An asset as a small card for a carousel or a watchlist grid: logo, price, change and a sparkline with a soft fill.

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

import { AssetLogo } from "@/components/ui/asset-row";import { AssetTile } from "@/components/ui/asset-tile";<AssetTile logo={<AssetLogo kind="fx" flags={["JO", "US"]} size="sm" />} name="USD/JOD" caption="FX" price="0.709" change={0.04} chart={[3, 3.2, 3.5, 4.2]} />

API reference

AssetTile

Prop	Type	Default	Description
`name / caption`	`ReactNode`	None	The asset and its kind or ticker.
`logo`	`ReactNode`	None	An AssetLogo at size sm.
`price`	`ReactNode`	None	The price, formatted by the app.
`change`	`number`	None	The change in percent: a Soft Trend badge.
`chart`	`number[]`	None	Recent prices for the sparkline.
`href`	`string`	None	Makes the whole tile a link.

Accessibility

ARIA

An article; with href the name is a link stretched over the tile.
The sparkline is decorative.

Arabic and RTL notes

Mirrors

Everything is start-aligned, so the tile's content moves to the right.

Does not mirror

The sparkline never mirrors; the price and change stay left to right.

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