Transaction Row

Pro

Payment row with an icon or photo, details and a signed amount. Pending payments look muted until they post, declines are struck through and refunds turn into credits.

Preview

Installation

npx @lumioui/cli add pro/transaction-row

Usage

import { TransactionRow, TransactionGroupHeader } from "@/components/ui/transaction-row/transaction-row";
<TransactionRow />

Also exported: TransactionGroupHeader.

Examples

Bank feed

The activity list on a current-account home.

Card statement

A credit-card statement.

Crypto wallet

A self-custody wallet's history.

Business expense

A business card's expense report.

API reference

TransactionRow

Prop Type Default
title* string

Merchant, payee or asset line.

 —
amount* number

Signed amount: negative is money out, positive is money in.

 —
meta string

One meta line under the title — "6:42 PM · Groceries".

 —
currency string

Currency symbol before the number. Default "$". Pass "" with unit for tokens.

 "$"
unit string

Unit after the number — "KLP", "pts".

 —
decimals number

Fraction digits. Default 2 (4–6 for tokens).

 2
secondaryAmount string

Second, smaller amount under the main one — fiat value of a token, original currency.

 —
status TransactionStatus

Lifecycle. Default "posted".

 "posted"
letter string

Letter disc — defaults to the title's first letter when no icon/image/leading is given.

 —
icon IconName

Category glyph in the disc instead of a letter.

 —
tint TransactionTint

Disc colour. Default "slate".

 "slate"
image ImageSourcePropType

Round photo instead of a disc — a person (P2P) or a merchant logo.

 —
leading React.ReactNode

Any leading node — overrides letter / icon / image.

 —
categoryTint TransactionTint

Category colour dot before the meta line (statement idiom).

 —
receipt ImageSourcePropType | boolean

Receipt slot after the amount: an image source shows the photo, true draws an attached-slip thumbnail, false shows an empty "add" slot. Omit for no slot.

 —
onReceiptPress () => void

Tap on the receipt slot (attach or open).

 —
separator boolean

Hairline under the row, inset to the text column.

 false
className string —

TransactionGroupHeader

Prop Type Default
title* string

Day or period — "Today", "Tue, Oct 6".

 —
total string

Net for the group, already formatted — "−$84.20".

 —
className string —