# Transaction Row

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/transaction-row
```

## Import

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

## Variants

- `bank-feed` — Bank feed: `npx @lumioui/cli add pro/transaction-row-bank-feed`
- `card-statement` — Card statement: `npx @lumioui/cli add pro/transaction-row-card-statement`
- `crypto` — Crypto wallet: `npx @lumioui/cli add pro/transaction-row-crypto`
- `expense` — Business expense: `npx @lumioui/cli add pro/transaction-row-expense`

## Props

### TransactionRow

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Merchant, payee or asset line. |
| `meta?` | `string` | One meta line under the title — "6:42 PM · Groceries". |
| `amount` | `number` | Signed amount: negative is money out, positive is money in. |
| `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). |
| `secondaryAmount?` | `string` | Second, smaller amount under the main one — fiat value of a token, original currency. |
| `status?` | `TransactionStatus` | Lifecycle. Default "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". |
| `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. |
| `className?` | `string` | — |

### TransactionGroupHeader

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Day or period — "Today", "Tue, Oct 6". |
| `total?` | `string` | Net for the group, already formatted — "−$84.20". |
| `className?` | `string` | — |

## Icons rendered

- `clock` — /icons.html?i=clock
- `x` — /icons.html?i=x
- `refresh` — /icons.html?i=refresh
- `plus` — /icons.html?i=plus

Source: https://lumioui.com/components/transaction-row