Components/Transaction Card

Transaction Card

A single financial transaction line item — merchant, amount, type, and category. Designed to stack vertically to form a ledger, wallet history, or payments inbox.

Spotify Premium

Music

Subscription2 hours ago

$9.99

Installation

npx ajaxui add transaction-card

Types

type drives both the amount sign and the color. Pending and failed states surface inline next to the date.

Salary

Income

ACME CorpToday 09:01

$4,200.00

Whole Foods

Food

GroceriesYesterday

$67.43

Uber

Transit

Ride to SFOA few min ago• pending

$42.10

Failed transfer

Transfer

To savings3 days ago• failed

$500.00

Composition as a list

Stack with a divider parent for a clean ledger look. The card has no outer margin — it adapts to whatever container drives the spacing.

Apple

Hardware

Mar 12

$1,299.00

Refund

Mar 11

$24.00

Netflix

Streaming

Mar 10

$15.49

Props

Prop	Type	Default	Description
title	string	—	Merchant or transaction name.
subtitle	string	—	Secondary descriptor (e.g. "Subscription").
amount	number	—	Absolute amount; sign is derived from type.
currency	string	"USD"	ISO 4217 currency code for Intl formatting.
type	"credit" \| "debit" \| "pending" \| "failed"	"debit"	Drives color, sign, and inline status text.
date	Date \| string	—	Pre-formatted string or Date (formatted via Intl).
locale	string	"en-US"	Locale used for Intl date + currency formatting.
category	string	—	Small uppercase chip next to the title.
icon	ReactNode	—	Leading icon — defaults to a merchant glyph.
onClick	() => void	—	When present, the card becomes a button.
href	string	—	When present, the card becomes a link.

Accessibility

The amount is announced with the currency name expanded by Intl.NumberFormat (e.g. "negative nine dollars and ninety-nine cents").
If onClick or href is set, the root becomes a focusable button/a with a focus ring.
Status colors are paired with explicit text (pending, failed) to avoid color-only meaning.