Transaction Row

Get Ritla UI

One transaction: icon, merchant, category, amount and time, with money in shown in green.

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

transaction-row.tsx

import { TransactionList, TransactionRow } from "@/components/ui/transaction-row";<TransactionList aria-label="Recent transactions">  <TransactionRow icon={ShoppingBagIcon} title="Carrefour" subtitle="Groceries" amount="−JOD 86.400" time="09:41" /></TransactionList>

API reference

TransactionRow

Prop	Type	Default	Description
`icon`	`IconComponent`	None	Figma's Icon.
`title / subtitle`	`ReactNode`	None	Figma's Title and Subtitle.
`amount`	`ReactNode`	None	The amount with its sign, isolated left to right.
`time / dateTime`	`ReactNode / string`	None	Figma's Time.
`type`	`"outgoing" \| "incoming"`	`"outgoing"`	Figma's Type.
`href`	`string`	None	Makes the row a link.

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
`Tab`	Moves between rows when they are links.

ARIA

The list is a named <ul>, and a row's link covers the whole row.
Incoming doesn't rely on colour: the + sign is part of the amount.

Arabic and RTL notes

Mirrors

The icon starts the row and the amount ends it.

Does not mirror

The amount and its sign are isolated, so the sign stays beside the number.

Numerals: Amounts as the app passes them.
Arabic typography: Title label-14 Medium, amount numeric-14 Medium.
Mixed-direction text: Merchant names are isolated, so a Latin name keeps its place in an Arabic row.