Transaction Row

"use client"

import {

The TransactionRow component shows one movement of money: who or what it was, the time and context with an inline status, and a signed amount. It has no leading icon. Group rows by day or state with TransactionGroup. Use it for activity feeds and history lists; for a row with media and actions, use Item, and for many columns, use a table.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/transaction-row
Copy

Usage#

Copyimport {
  TransactionGroup,
  TransactionRow,
} from "@/components/ui/transaction-row"

Copy<TransactionGroup label="Today" total={-27.9}>
  <TransactionRow
    title="Corner market"
    description="14:32 · Groceries"
    amount={-23.4}
  />
  <TransactionRow
    title="Coffee Point"
    description="08:14 · Eating out"
    amount={-4.5}
  />
</TransactionGroup>

Composition#

Use the following composition to build a list of transactions:

CopyTransactionGroup
├── TransactionRow
└── TransactionRow

While the list loads, render the skeletons in its place:

CopyTransactionGroupSkeleton
└── TransactionRowSkeleton

Features#

• Signed amount through MoneyAmount, with the sign taken from amount or set by direction
• Five statuses: completed shows no marker, pending and refunded add a quiet one, failed and cancelled also strike the amount
• A plain row, a link with href, or a button with onPress, each as one pressable element
• masked hides the digits when the user hides their balance
• A group heading with an optional total, or a hidden heading, or an outside heading
• Skeletons on the row's own metrics for loading states

Statuses#

Set status to show where the transaction stands. The marker follows the description.

"use client"

import { TransactionRow } from "@/components/ui/transaction-row"

Direction#

A negative amount is money out and a positive one is money in. Set direction when your data stores amounts without a sign.

"use client"

import { TransactionRow } from "@/components/ui/transaction-row"

Pressable rows#

Pass href to make the row a link, or onPress to make it a button that opens a details sheet. isDisabled works on both.

"use client"

import * as React from "react"

Group labels#

Inside a titled section, pass the title's id as aria-labelledby instead of label. Use hideLabel when the screen title already says what the list is.

"use client"

import * as React from "react"

Masked#

Set masked on the rows and the group to replace the digits with dots.

"use client"

import {

Loading#

Use TransactionGroupSkeleton and TransactionRowSkeleton while the data loads. Set media when the real rows lead with an avatar.

"use client"

import {

Accessibility#

A row with href renders a React Aria Link and a row with onPress a React Aria Button, so the whole row is one focusable element with press, keyboard and disabled handling. Without either, it is plain content.

Row name#

A pressable row is named by its text: title, description, status and amount, in that order. A comma is read between the description and the status. A static row has no role or name of its own; its text is read as plain content in the same order. Keep the title short and specific, such as a merchant or a person's name.

Groups#

TransactionGroup renders a list named by its heading, and wraps each child in a list item. The heading is an h3 by default; set headingLevel to fit the page outline. The total is read with totalLabel before it, "Total" by default.

Loading#

The skeletons are hidden from assistive tech. Mark the loading container with aria-busy="true" and announce loading once, not per row, with a role="status" element outside it.

Meaning beyond color#

failed and cancelled strike the amount, and every status other than completed is also written as text.

API Reference#

TransactionRow#

Without href or onPress it accepts all props of <div>. With href it accepts React Aria Link props, and with onPress React Aria Button props.

TransactionGroup#

A labelled list of rows. Accepts all props of <div> except title. Pass either label or aria-labelledby.

TransactionRowSkeleton#

A placeholder with the row's metrics. Accepts all props of <div> except children.

TransactionGroupSkeleton#

A placeholder for a whole group. Accepts all props of <div> except children.